JavaScript动态添加输入框故障排查：语法错误与页面无响应问题

我帮你找出了几个关键问题，这就是为什么你的代码报错且功能不生效的原因：

1. JavaScript字符串语法错误 #

你定义html变量的最后一行写了'/;，这里多了一个不必要的斜杠，导致字符串没有正确闭合，Sublime提示的语法错误就来自这里。应该把结尾的'/;改成';。

2. DOM选择器错误 #

你用$("#all")去查找要添加元素的容器，但HTML里这个容器是class为all的<div class="all">，不是id，所以应该用类选择器$(".all")。

3. 表单按钮默认行为未阻止 #

#add是表单内的按钮，点击它会触发表单的默认提交行为，页面会刷新，导致你看不到添加的输入框。需要在点击事件里添加e.preventDefault();来阻止这个默认行为。

4. 额外的潜在问题（优化建议） #

• HTML里多个输入框用了同一个id="tbox"，id在页面中必须是唯一的，建议把这些id改成class，比如class="tbox"。
• 动态添加的选项的name属性（比如checkbox4、antwoordd）重复了，提交表单时会导致数据覆盖，建议用计数器来生成唯一的name，比如每次添加时递增数字。

修正后的完整代码 #

HTML部分（修正id重复问题） #

</head>
<body>
<!--navigatie -->
<div class="container">
  <nav>
    <div class="row">
      <div class="col-md-4 studentdocent">
        <button type="button" class="btn btn-primary">Docent</button>
        <a href="student.php"><button type="button" class="btn btn-primary">Student</button></a>
      </div>
      <div class="col-md-8">
        <h1 class="head"> Meerkeuzevragen</h1>
      </div>
    </div>
  </nav>
  <form action="jsonswitch.php" method="post">
    <div class="container">
      <!-- Oefening input -->
      <div class="all">
        <div id="toevoeg">
          <div class="row">
            <div class="col-md-12">
              <label>Naam van de oefening</label>
              <div class="input-group"></div>
              <input type="text" class="form-control tbox" name="oefening" placeholder="Naam van de oefening">
            </div>
          </div>
        </div>
        <!-- vraag input -->
        <div class="row">
          <div class="col-md-12">
            <label>Zet hier je vraag neer</label>
            <div class="input-group"></div>
            <input type="text" class="form-control tbox" name="vraag" placeholder="Voer hier je vraag in..">
          </div>
        </div>
        <!-- antwoord input -->
        <div class="row">
          <div class="col-md-12">
            <label>Antwoord A</label>
            <div class="input-group">
              <div class="input-group-addon">
                <input type="checkbox" name="checkbox1">
              </div>
              <input type="text" class="form-control tbox" name="antwoorda" placeholder="Zet hier antwoord a neer...">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <label>Antwoord B</label>
            <div class="input-group">
              <div class="input-group-addon">
                <input type="checkbox" name="checkbox2">
              </div>
              <input type="text" class="form-control tbox" name="antwoordb" placeholder="Zet hier antwoord b neer...">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <label>Antwoord C</label>
            <div class="input-group">
              <div class="input-group-addon">
                <input type="checkbox" name="checkbox3">
              </div>
              <input type="text" class="form-control tbox" name="antwoordc" placeholder="Zet hier antwoord c neer...">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <label>Antwoord D</label>
            <div class="input-group">
              <div class="input-group-addon">
                <input type="checkbox" name="checkbox4">
              </div>
              <input type="text" class="form-control tbox" name="antwoordd" placeholder="Zet hier antwoord d neer...">
            </div>
          </div>
        </div>
      </div>
      <!-- Verstuur button -->
      <div class="col-md-4">
        <button class="upload btn btn-info fa fa-upload" type="submit"></button>
        <button class="upload btn btn-success fa fa-plus" id="add"></button>
        <button class="upload btn btn-danger fa fa-minus" id="remove"></button>
      </div>
    </div>
  </form>

JavaScript部分（修复语法、选择器、默认行为，添加唯一name逻辑） #

$(document).ready(function(e){
  // 计数器，用于生成唯一的name属性
  let answerCount = 5;
  // 修正字符串语法错误，同时用模板字符串方便动态生成name
  function getNewAnswerHtml() {
    return `<div class="row">
      <div class="col-md-12">
        <label>Antwoord ${String.fromCharCode(64 + answerCount)}</label>
        <div class="input-group">
          <div class="input-group-addon">
            <input type="checkbox" name="checkbox${answerCount}">
          </div>
          <input type="text" class="form-control tbox" name="antwoord${String.fromCharCode(96 + answerCount)}" placeholder="Zet hier antwoord ${String.fromCharCode(97 + answerCount - 1)} neer...">
        </div>
      </div>
    </div>`;
  }

  //input toevoegen
  $("#add").click(function(e){
    // 阻止表单默认提交行为
    e.preventDefault();
    $(".all").append(getNewAnswerHtml());
    answerCount++;
  });
});

这样修改后，你的代码就可以正常点击添加按钮生成新的输入框，语法错误也会消失，同时还优化了表单数据提交的合理性。

内容的提问来源于stack exchange，提问作者acetrap