无法让 javascript 在 jsfiddle 中以 HTML 形式工作

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 - bottom of <body>.

在DOM加载时使用，该函数不会成为全局函数，因此您不能直接从HTML调用它。如果它是全局的 - 就像使用 no-wrap 时一样 - 它有效。

无法让 javascript 在 jsfiddle 中以 HTML 形式工作

Can't get the javascript to work in HTML form in jsfiddle

html

javascript

css

forms

jsfiddle