Question

我正在整理一个html表单，可以在其中将用户添加到电子邮件通讯组列表中。我试图在jfiddle上模拟它，但是由于某种原因，javascript无法正常工作。当我将以下代码保存在html页面中并在浏览器中尝试时，它可以正常工作。我的问题是什么是我在jsfiddle中做错了并且javascript函数不起作用。谢谢！

不起作用的jsfiddle在这里：MyFiddleExample

function onAddClicked() {
  var userList = document.getElementById("UserList");
  var distributionList = document.getElementById("DistributionList");

  var newMember = document.createElement('option');
  newMember.value = userList.options[userList.selectedIndex].value;
  newMember.innerHTML = userList.options[userList.selectedIndex].text;

  distributionList.appendChild(newMember);
}

<form>

  <div class="form-row">
    <div class="form-group col-md-5">
      <label for="UserList">Available Users:</label>
      <select class="form-control" name="UserList" size=10 id="UserList">
        <option value="UserA">User A</option>
        <option value="UserB">User B</option>
        <option value="UserC">User C</option>
        <option value="UserD">User D</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" onclick="onAddClicked()" class="btn btn-success btn-block" style="margin-top:33px">Add &gt;&gt;</button>
      <button type="button" class="btn btn-danger btn-block" style="margin-top:33px">&lt;&lt; Remove</button>
    </div>

    <div class="form-group col-md-5">
      <label for="DistributionList">Distribution List Members:</label>
      <select class="form-control" name="DistributionList" size=10 id="DistributionList">
      </select>
    </div>
  </div>
</form>

Answer 1

该问题特定于JSFiddle。您需要将LOAD TYPE更改为No wrap-<body>的底部。

在DOM负载上使用时，该函数不会成为全局函数，因此您不能直接从HTML调用它。如果它是全局的（例如使用无包装时），则可以。

无法使JavaScript在jsfiddle中以HTML形式工作

1 个答案: