javascript - 无法让 javascript 在 jsfiddle 中以 HTML 形式工作
问题描述
我正在整理一个 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 >></button>
<button type="button" class="btn btn-danger btn-block" style="margin-top:33px"><< 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 特有的。您需要将 LOAD TYPE 更改为 No wrap-bottom of <body>
。
在 DOM 加载中使用时,该函数不会成为全局函数,因此您不能直接从 HTML 调用它。如果它是全局的 - 就像使用 no-wrap 时一样 - 它可以工作。
推荐阅读
- excel - 打开多个文件时如何返回我的主文件
- r - 根据另一个表中的值计算一个表中的总和
- javascript - 按字符串引用嵌套的 json 对象属性
- python - 从 bash shell 脚本调用 Python 脚本
- r - 在两个不同的数据集上循环逻辑运算符以在 R 中创建第三个数据集
- latex - 如何在 Google Colab 中使用 LATEX 显示表格?
- java - 如何防止可绘制对象在recyclerview上刷新?
- javascript - 使用带有构造函数的调用方法
- r - 用条件绘制点并向它们添加颜色
- javascript - 识别“。” 并且通过“if ... if”在字符串中没有空格