JavaScript 未在 jsfiddle.net 上运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5468350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript not running on jsfiddle.net
提问by Leahcim
The code below works on a live site but I can't get it to run on the site jsfiddle.
下面的代码适用于一个实时站点，但我无法让它在站点jsfiddle上运行。
See thisfor example.
请参阅此示例。
Can anyone tell me why it's not working on jsfiddle?
On the console it logs: ReferenceError: fillList is not definedand ReferenceError: mySelectList is not defined.
在控制台上它记录：ReferenceError: fillList is not defined和ReferenceError: mySelectList is not defined。
The code works as you can see when it's embedded here as snippet:
当代码作为片段嵌入此处时，您可以看到该代码的工作方式：
function BetterSelect(oSelList) {
this.objSelectList = oSelList;
this.objSelectList.onchange = this.selectionChanged;
}
BetterSelect.prototype.clear = function() {
this.objSelectList.options.length = 0;
}
BetterSelect.prototype.fill = function(aValues) {
this.clear();
for (var i = 0; i < aValues.length; i++) {
this.objSelectList.options[i] = new Option(aValues[i]);
}
}
BetterSelect.prototype.find = function(strToFind, bSelect) {
var indx = -1;
this.objSelectList.options.selectedIndex = -1;
for (var i = 0; i < this.getCount(); i++) {
if (this.objSelectList.options[i].text == strToFind) {
indx = i;
if (bSelect)
this.objSelectList.options.selectedIndex = i;
}
}
return indx;
}
BetterSelect.prototype.getCount = function() {
return this.objSelectList.options.length;
}
BetterSelect.prototype.selectionChanged = function() {
alert("selection changed!");
}
var mySelectList = null;
window.onload = function() {
mySelectList = new BetterSelect(document.getElementById('theList'));
}
function fillList() {
mySelectList.fill(["one", "two", "three", "four", "five"]);
}
function findIt() {
mySelectList.find(document.getElementById('txtToFind').value, true);
}<form action="" method="post">
<select multiple="multiple" name="Select1" id="theList" style="width: 152px; height: 226px">
</select>
<br />
<input name="Button1" type="button" value="Fill The List" onclick="fillList()" />
<input name="Button4" onclick="mySelectList.clear()" type="button" value="Clear The List" />
<br />
<input name="Button2" onclick="alert(mySelectList.getCount())" type="button" value="What's The Count?" />
<br />
<input name="Text1" type="text" id="txtToFind" />
<input name="Button3" type="button" value="Search" onclick="findIt()" />
</form>回答by meder omuraliev
The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options
您定义的函数是在 onload 函数中定义的，因此在它们可引用之前，因为它们是在该函数中定义的，所以它们只能从该函数内部被引用。您在 HTML 中将它们引用为全局变量。你有三个选择
a) ( easiest, quickest, not ideal ) - change function blah(){}to window.blah = function(){};making the functions global.
a)（最简单、最快、不理想）- 更改function blah(){}为window.blah = function(){};使函数全局化。
b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.
b)（理想方式）- 使用不显眼的 Javascript 从 JS 内部将行为附加到 DOM 元素，这意味着将 HTML 与 JS 分开。
c) Make the jsfiddle not wrap the stuff onload. Change onLoadto no wrap ( body or head ).
c) 使 jsfiddle 不包装东西 onload。更改onLoad为无包裹（ body 或 head ）。
So instead of <p onclick="lol()" id="foo">you'd do var e = document.getElementById('foo'); e.onclick = lol;in the JS only.
所以，而不是<p onclick="lol()" id="foo">你var e = document.getElementById('foo'); e.onclick = lol;只在 JS 中做。
I recommend b as it encourages best practices.
我推荐 b 因为它鼓励最佳实践。
回答by mVChr
In your fiddle select no wrap (head)in the dropdown on the left, click Run and it will work.
在no wrap (head)左侧下拉列表中的小提琴选择中，单击运行，它将起作用。
When onLoadis selected your functions are defined within the closure of the $(document).ready(function() {});only.
当onLoad被选中时，你的函数是在$(document).ready(function() {});唯一的闭包内定义的。
回答by Don D
I found the same issue and solve it by changing Load Typein the JavaScript settings:
我发现了同样的问题并通过更改Load TypeJavaScript 设置来解决它：
No wrap-in<head>or No wrap-in<body>in the drop down JavaScript settings menu. Refer the below image.
No wrap-in<head>或No wrap-in<body>在下拉 JavaScript 设置菜单中。参考下图。
回答by Yeldar Kossynbay
Look at:
看着：
https://stackoverflow.com/a/4935684/6796393
https://stackoverflow.com/a/4935684/6796393
Or it is better to see this one:
或者最好看看这个：
https://stackoverflow.com/a/19110630/6796393
https://stackoverflow.com/a/19110630/6796393
Here is what I tested:
这是我测试的：
function testJSON() {
var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}';
var tmp_obj = eval('(' + jsonString + ')');
document.getElementById("result").innerHTML = tmp_obj.param2;
}
and
和
function testJSON() {
var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}';
var tmp_obj = JSON.parse(jsonString);
document.getElementById("result").innerHTML = tmp_obj.param2;
}
It is better to use the second aproach.
最好使用第二种方法。
P.S.> I came from How to parse parameters from JSON String using JS?
