使用JavaScript在html中动态添加文本框(出现语法错误)

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

本文关键字：语法 错误 文本 JavaScript html 添加 动态 使用      更新时间：2023-09-26
<!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>

这是我的html代码，它有一个JavaScript函数来动态地添加一个文本框，当'+'按钮被点击，但程序不工作给出一个错误:

(check5.php?name=&child_1=&phone=:10 Uncaught SyntaxError: Unexpected .

请帮我解决这个问题

问题是这个赋值中的字符串文字:

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)">";

当你的字符串用"字符声明时，你必须使用反斜杠来转义字符串本身所需的任何"字符。此外，你不能在字符串字面量的中间有换行符(除非它是一个ES6字符串，声明用反引号代替引号)。

那么试试这个，带转义且不带回车:

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)'">";

或者你可以用单引号把字符串括起来，这样你就不用转义双引号了:

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)">';

无论哪种方式，我都通过连接三个字符串字面量来删除字符串中的换行符，以便它仍然可以在代码中格式化为三行。你可以把它改成一行:

    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)">';

如果你需要一个真正的换行符在你的字符串你使用'n，像"This string has a newline here:'nThank you."

Update:您在这行'kids'之后还缺少一个):

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

展开下面的代码片段，看到上面的问题已经修复，并且代码正常工作:

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>

相关文章：