Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding HTML using JS

    Hi all,
    I'm struggling with a college assignment and was wondering if anyone was willing to help.
    The assignment is relatively simple, create a website and compare it to a professionally made one. I'm struggling with a bit of code I want to put in to make my website a little fancier.

    I'm making an order form where the user selects a flavour from a select box and then enters a quantity and the price is displayed.
    I want a button which, when clicked, adds another row to the table with cells containing code.

    This is what I have so far:
    Code:
    <script>
    	function add(){
    		var table=document.getElementById("Table");
    		var row=table.insertRow();
    		var cell1=row.insertCell(0);
    		var cell2=row.insertCell(1);
    		var cell3=row.insertCell(2);
    		var cell4=row.insertCell(3);
    		cell1.innerHTML="Cell1";
    		cell2.innerHTML="Cell2";
    		cell3.innerHTML="Cell3";
    		cell4.innerHTML="Cell4";
    		}
    </script>
    This works fine but when trying to add code instead of "Cell#" it ceases to work. If anyone could help that would be greatly appreciated but if possible I'd rather avoid anything overly complicated as I would like to be able to understand it fully.

    Thanks again

    -Rob

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    quite possibly not getting it, but do you mean that instead of this:
    Code:
    cell1.innerHTML="Cell1";
    you want to add some javascript to the innerHTML?

    because that would just be weird and nonsensical.

    just guessing, but are you trying to do something like

    Code:
    cell1.onclick=function(){some_javascript_here};
    ?

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    quite possibly not getting it, but do you mean that instead of this:
    Code:
    cell1.innerHTML="Cell1";
    you want to add some javascript to the innerHTML?

    because that would just be weird and nonsensical.

    just guessing, but are you trying to do something like

    Code:
    cell1.onclick=function(){some_javascript_here};
    ?
    So I'm not great with JavaScript or explaining things, let me give it another shot.

    I have a table which has a row containing a select box and 2 text boxes.


    I want the button to add another row to the table almost identical to that one. The only difference being the name of the text box so that I can calculate the prices seperately.

    The reason I have the code from my original post in there is because I wasn't really sure how to go about doing this so I started by finding out how to add a new row to the table and then went from there to adding text.

    I was hoping that it would be as simple as changing the words to code and viola! Alas, I was mistaken. Hope that clears up any confusion

    -Rob

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    innerHTML as the name suggests is for inserting HTML into that spot in the page.

    All JavaScript should be in an external file completely separate from the HTML and attached to the appropriate points in the page using ids classes or if the HTML is being added by JavaScript then by attaching event handlers to the JavaScript references to the elements as you add them.

    Adding JavaScript calls (such as onclick) inside the HTML that you are adding using innerHTML has a lot of issues as parts of the code run at two completely different times and so the values that parts of the code are expected to have may have completely different values by the time it runs.


    Perhaps if you include what you tried replacing Cell# with we might have a better idea of just what it is you are trying to do.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    you can't use innerHTML to insert <script> tags. Well, you can, but they won't fire. jQuery has a command/option for this, I don't remember what.

    you can loop through the <script> tags once added, and send the text of each tag to window.eval(text), which does basically the same thing as hard-coding the <script> tags in the original content would have done. jQuery et al simply do that for you.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rnd me View Post
    you can't use innerHTML to insert <script> tags. Well, you can, but they won't fire..
    You never need to insert script tags anywhere other than immediately before the </head> or </body> tags anyway with 99.9% of them being best placed in the second of those spots. As the code is already inside of a script you don't need to add new script tags to add code either - simply include the JavaScript code alongside of the other code referencing the tags that it is to attach to as Xelawho already mentioned.

    So if the OP is trying to insert script tags there then they are going about things completely the wrong way as even if it did work it would be an extremely poor way to code it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Sorry, post #3 was in the moderation queue and apparently I’m the only one that occasionally comes by and takes care of this.
    Last edited by VIPStephan; 02-26-2013 at 11:11 PM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    So the best thing to do would be to show us what the static HTML for that existing row looks like. Then we can show you how to (effectively) clone the row.

    IMPORTANT: You need to also show us the <form> tag. So we know where the info is being submitted to. Yes, it matters.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    So the best thing to do would be to show us what the static HTML for that existing row looks like. Then we can show you how to (effectively) clone the row.

    IMPORTANT: You need to also show us the <form> tag. So we know where the info is being submitted to. Yes, it matters.
    Code:
    	<form name="OrderForm" action="mailto:RD136723@ghs.truropenwith.ac.uk" method="POST">
    		<tr>
    			<td>
    				<select>
    					<option value="None">Please choose a flavour</option>
    					<option value="RC&O">Red Cherry & Orange</option>
    					<option value="BR&GO">Blue Raspberry & Green Apple</option>
    					<option value="P&RC">Pineapple & Red Cherry</option>
    					<option value="GA&RC">Green Apple & Red Cherry</option>
    					<option value="O&BR">Orange & Blue Raspberry</option>
    					<option value="P&O">Pineapple & Orange</option>
    					<option value="BR&RC">Blue Raspberry & Red Cherry</option>
    				</select>
    			</td>
    			<td>
    			</td>
    			<td>
    				<input type="text" name="Quantity" value="1" size="1"></input>
    			</td>
    			<td>
    				<input type="text" name="Price" size="6" readonly></input>
    			</td>
    			<td>
    				<button type="button" onClick="add()"/>
    			</td>
    		</tr>
    	</form>
    </table>
    Wasn't entirely sure which bits to leave out and which to put in so I just left everything in from the form.

    Here's the HTML for the entire page if you wanted to look at it as a whole.
    http://pastebin.com/sc5eJ3Ut

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Well, first of all a huge warning: action="mailto:..." is not only obsolete, it (a) isn't supported unless a mail client has been linked to the browser *BY THE USER* and (b) doesn't support form element submission in all browsers and (c) even when supported will likely ask the user if he/she really wants to submit the data to you and warns of possible bad effects, thus scaring off half your users.

    SO... You *REALLY* need to abandon that and find a server-side form mailer instead. PHP or ASP or CGI or whatever, but one that will simply take the form contents and then send them to you, so that it works in all browser and doesn't scare off customers.

    You also have a horrible mistake there: You don't have any name= for your <select>, so that field won't be sent to you *NO MATTER WHAT*. Only form fields with names are processed by HTML and sent on.

    ANYWAY...

    One way to do this, is to simply clone the entire row contents.

    Suppose you changed your current row to add an id:
    Code:
        <tr id="firstRow">
    Then your addRow code could be as simple as:
    Code:
    	function add(){
    		var table=document.getElementById("Table");
    		var row=table.insertRow();
                    row.innerHTML = document.getElementById("firstRow").innerHTML;
           }
    That should work in most browsers. Older MSIE might choke.

    The correct way is, of course, to use tons and tons of JS code to create all the <td>s and all the <form> fields using document.createElement(), et al.

    As a first stab, try the above simple innerHTML copy.

    Now...

    FAIR WARNING: If you give all the "Quantity" fields (just to pick the one example) the same name, then you have to really careful in your form-sending code to be sure that all the fields are picked up in the same order they appear on tha page. I don't know how to do that with PHP (it may even come naturally). I can do it with ASP. No idea about CGI. About all you can do is try it out.

    Another alternative, of course, is to give each row a number and each <form> field a name that has the row number as a suffix. Not hard to do. Just a little more JS tedium.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, that's a lot of stuff

    I should mention that my lecturer insists on the use of action="mailto" and is actually urging everyone to use Expressions Web for this assignment. To be honest I think it is down to his incompetency. He couldn't even explain to us how cookies worked, he just said "copy and paste the code from here and it will work fine"

    Thanks for pointing out the select name thing, I'll add those in

    I'll give that code a shot and let you know how it goes.
    Thanks for all the help

    -Rob

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by MrRob View Post
    I should mention that my lecturer insists on the use of action="mailto" and is actually urging everyone to use Expressions Web for this assignment.
    I think Microsoft declared Expression Web to be dead last year. They have now moved on to yet another web editor that is a part of a complete development suite.

    Microsoft's web editor offerings have never produced anything that could be considered to be acceptably written HTML though - somewhere between poor and garbage is how it can usually be described - unless you ignore the WYSIWYWYG part and simply use it to code by hand - which is the only way to produce really good quality HTML anyway since only you know what the parts of the content mean and that's what the HTML tags are intended to define.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by felgall View Post
    I think Microsoft declared Expression Web to be dead last year. They have now moved on to yet another web editor that is a part of a complete development suite.

    Microsoft's web editor offerings have never produced anything that could be considered to be acceptably written HTML though - somewhere between poor and garbage is how it can usually be described - unless you ignore the WYSIWYWYG part and simply use it to code by hand - which is the only way to produce really good quality HTML anyway since only you know what the parts of the content mean and that's what the HTML tags are intended to define.
    I would advise you to avoid all these code generators such as Frontpage and Dreamweaver like the plague. They invariably produce poor quality, excessivly verbose and outdated code. You should code by hand. Use Notepad++.

    We see examples of incompetent teachers/lecturers here almost every week. Why do you not complain and ask for your money back? Would you accept incompetent lecturers who barely know their subject in Maths, Physics, Law, Medicine or French?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    Why do you not complain and ask for your money back?
    That sounds like a good idea. Most of the people asking for assistance with JavaScript homework here ought to ask for their money back since the questions they have been given to answer and the sort of code that they are expected to use in answering them clearly indicates that the person teaching their class needs to take a JavaScript beginners course to learn the basics of the language at least as badly as their students do. Why do all these people actually pay someone to teach them something when the teacher doesn't know the most basic things about the topic that they are attempting to teach.

    Perhaps they should go one step further given that the JavaScript they end up learning here means that they actually know more JavaScript than their teacher does is to offer to teach JavaScript to their current teacher with the 'teacher' paying them to learn some of the JavaScript basics that the student now knows that the 'teacher' doesn't.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha, I appreciate the advice.
    College is free here in England as long as you're under 18 so I'm not actually paying for the course otherwise I would've quit months ago.

    I've always avoided those programs. I was forced to use FrontPage 2000 a few years ago in school and I hated it so much that I spent a little while learning the basics of HTML in Notepad to avoid ever having to use it again.

    The code that Old Pedant provided worked great in Chrome but did nothing in Firefox and added an empty row in IE.

    Again I'd like to thank everyone who gave me advice or helped in any way.
    I handed in the assignment earlier today with the button omitted as I was unable to get it fully working in time.

    -Rob


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •