无法让 javascript 在 jsfiddle 中以 HTML 形式工作 [重复]答案

【问题标题】：Can't get the javascript to work in HTML form in jsfiddle [duplicate]无法让 javascript 在 jsfiddle 中以 HTML 形式工作 [重复]
【发布时间】：2019-05-20 22:08:36
【问题描述】：

我正在整理一个 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>

【问题讨论】：

如果它在浏览器中工作但在 JSFiddle 中不能工作，则可能是复制/粘贴错误或 JSFiddle 中的错误。
你在 jsfidle 中使用 jquery，试试这段代码并使用 jquery : $('.btn-success').click(function() { if(val != undefined) { var val = $ ("select#UserList option:checked").val(); $("select#DistributionList").append($('
感谢 Shim-Sao 的推荐，我会记住这一点，但问题的目的是了解 jsfiddle 为何不起作用。

标签： javascript html css forms jsfiddle

【解决方案1】：

这个问题是 JSFiddle 特有的。您需要将 LOAD TYPE 更改为 No wrap - bottom of <body>。

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

【讨论】：