Dynamically adding text boxes in html using JavaSc

<!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

标签： javascript html dynamic textbox

1条回答

Melony?

2楼-- · 2019-07-23 15:20

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>

0人赞添加讨论(0) 举报

Dynamically adding text boxes in html using JavaSc

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间