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>

这是我的html代码，它有一个JavaScript函数，可以在＆＃39; +＆＃39;动态添加文本框。单击按钮，但该程序无法发出错误：

（check5.php？name =＆amp; child_1 =＆amp; phone =：10 Uncaught SyntaxError：Unexpected 标识符）`在JavaScript函数第1部分中。

请帮我解决这个问题

Answer 1

问题在于此作业中的字符串文字：

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."

更新：您在此行)之后错过了'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>

使用JavaScript在html中动态添加文本框（发生语法错误）

1 个答案: