Dynamically adding text boxes in html using JavaScript (syntax error occurs)

Question

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var i =1;
        function addkid(){
            if(i<=3){
                i++;
                var div=document.createElement('div');
                div.innerHTML="Child:<input type="text" name="child_1">
                <input type="button" id="add_kid()" onclick="addkid()" value="+" />
                    <input type="button" value="-" onclick="removekid(this)">";
                 document.getElementById('kids').appendChild(div);
            }
        }
        function removekid(div){
            document.getElementById('kids'.removeChild(div.parentNode);
                                    i--;
                                    }


    </script>
</head>
    <body>
        <form>
            Name: <input type="text" name="name"><br/>
            <div id="kids">
                Child:<input type="text" name="child_1">
                <input type="button" id="add_kid()" onclick="addkid()" value="+" />(limit 3) 


            </div>
            Phone: <input type="text" name="phone"><br/>
            <input type="submit" name="submit" value="submit" />        

        </form>

    </body>

</html>

This is my html code which has a JavaScript function to add a text box dynamically when the '+' button is clicked, but the program does not work giving an error:

(check5.php?name=&child_1=&phone=:10 Uncaught SyntaxError: Unexpected identifier)` in the JavaScript function part 1.

Please help me to solve this

Does the error tell you which line the error occurs on? If you are looking in the browser's console it should show the line number as a link, and if you click it it should show the actual code with the problem highlighted. (And actually the colour-based syntax highlighting that Stack Overflow has applied to your code shows the problem: you haven't escaped the nested quotes in the line div.innerHTML = ....) — nnnnnn
– nnnnnn, Commented Sep 2, 2016 at 2:53
"Child:<input type="text" name="child_1"> this line gives the error — Kasun Sampath
– Kasun Sampath, Commented Sep 2, 2016 at 2:55

nnnnnn · Accepted Answer · 2016-09-02 03:16:24Z

2

The problem is with the string literal in this assignment:

div.innerHTML="Child:<input type="text" name="child_1">
            <input type="button" id="add_kid()" onclick="addkid()" value="+" />
                <input type="button" value="-" onclick="removekid(this)">";

When your string is declared with " characters you have to use backslashes to escape any " characters needed in the string itself. Also, you can't have line breaks in the middle of a string literal (unless it is an ES6 string declared with back-ticks instead of quotation marks).

So try this, with escaping and no carriage returns:

div.innerHTML = "Child:<input type=\"text\" name=\"child_1\">"
  + " <input type=\"button\" id=\"add_kid()\" onclick=\"addkid()\" value=\"+\" />"
  + " <input type=\"button\" value=\"-\" onclick=\"removekid(this)\">";

Or you can surround the string with single quotes and then you don't have to escape double quotes:

div.innerHTML = 'Child:<input type="text" name="child_1">'
  + ' <input type="button" id="add_kid()" onclick="addkid()" value="+" />'
  + ' <input type="button" value="-" onclick="removekid(this)">';

Either way I have removed the line breaks in the string by concatenating three string literals so that it can still be formatted as three lines in your code. You could instead just make it one long line:

    div.innerHTML = 'Child:<input type="text" name="child_1"> <input type="button" id="add_kid()" onclick="addkid()" value="+" /> <input type="button" value="-" onclick="removekid(this)">';

If you need an actual newline character in your string you use \n, like "This string has a newline here:\nThank you."

Update: You were also missing a ) after 'kids' on this line:

document.getElementById('kids'.removeChild(div.parentNode);

Expand the following code snippet to see the above things fixed, and the code working:

var i = 1;

function addkid() {
  if (i <= 3) {
    i++;
    var div = document.createElement('div');
    div.innerHTML = 'Child:<input type="text" name="child_1">'
      + ' <input type="button" id="add_kid()" onclick="addkid()" value="+" />'
      + ' <input type="button" value="-" onclick="removekid(this)">';
    document.getElementById('kids').appendChild(div);
  }
}

function removekid(div) {
  document.getElementById('kids').removeChild(div.parentNode);
  i--;
}

<form>
  Name:
  <input type="text" name="name">
  <br/>
  <div id="kids">
    Child:
    <input type="text" name="child_1">
    <input type="button" id="add_kid()" onclick="addkid()" value="+" />(limit 3)
  </div>
  Phone:
  <input type="text" name="phone">
  <br/>
  <input type="submit" name="submit" value="submit" />
</form>

edited Sep 2, 2016 at 3:16

answered Sep 2, 2016 at 3:04

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kasun Sampath Over a year ago

Thanx though there is no errors now occurring :) when the "+" no addition of a new text box occurs :(

nnnnnn Over a year ago

There was an error within removekid(). I've updated my answer, and included a working demo.

Kasun Sampath Over a year ago

i corrected that no errors now but a new text box won,t get added also

nnnnnn Over a year ago

I can't explain that, unless you have further error messages in the browser console (either when loading the page or when you press the add button). As you can see from the demo in my answer the code I've shown works.

Kasun Sampath Over a year ago

Thanx alot great help :) i was stuck with this the whole day yesterday

Collectives™ on Stack Overflow

Dynamically adding text boxes in html using JavaScript (syntax error occurs)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related