tags:

views:

55

answers:

6

Why doesn't this work? innerHTMl cannot take in sth so complicated?

<html>
<head>
    <script type="text/javascript">
        function addTable() {
            var html = "<table><tr><td><label for="name">Name:</label></td><td><input type="text" id="name"></input></td></tr>"; +
                "<tr><td><label for="remarks">Remarks:</label></td><td><input type="text" id="remarks"></input></td></tr></table>";
            document.getElementById("addtable").innerHTML = html;
        }
    </script>


</head>
<body>
    <input type="submit" value="New Table" onClick="addTable()"/>
    <div id="addtable"></div>
</body>
</html>

something less complicated like this works:

var html = "<table><tr><td>123</td><td>456</td></tr></table>";
+4  A: 

You need to either escape double quotes within the string you're assigning to the html variable, or just enclose the string with single quotes. Use a text editor with syntax highlighting and errors like that will jump out at you right away. You also have an extra semicolon in your assignment.

Jimmy Cuadra
That's the main reason why I use single quotes to signify strings in javascript.
Paul Manzotti
I am using Notepad++...
yeeen
+1  A: 

Your quoting is broken. You are using double quotes inside the string:

"<tr><td><label for="remarks">Remarks:</label></td><td><input .... 

the Firefox error console should always be your first stop, errors like that are always logged there.

Pekka
A: 

instead of double quotes use single quotes as shown below:

var html = "<table><tr><td><label for='name'>Name:</label></td><td><input type='text' id='name'></input></td></tr>' + "<tr><td><label for='remarks'>Remarks:</label></td><td><input type='text' id='remarks'></input></td></tr></table>";

Enjoy coding!!

Ravia
+1  A: 

Your string is delimited using double quotes and also uses them within the string. Switch to using single quotes within the string.

var html = "<table><tr><td><label for='name'>Name:</label></td><td><input type='text' id='name'></input></td></tr>"; +
"<tr><td><label for='remarks'>Remarks:</label></td><td><input type='text' id='remarks'></input></td></tr></table>";
Dave Anderson
A: 

You need to either escape double quotes or use single quotes within the string destined for that innerHTML.

Aoriste
A: 

There is an error in your string , try this :

var html = "Name:"; + "Remarks:"; document.getElementById("addtable").innerHTML = html;

remi bourgarel