以下のコードはライブサイトで動作しますが、サイトで実行することはできません jsfiddle 。
this を参照してください。
jsfiddle で動作しない理由を教えてください。
コンソールでログに記録します:ReferenceError: fillList is not defined
およびReferenceError: mySelectList is not defined
。
コードは、ここにスニペットとして埋め込まれたときにわかるように機能します。
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>
定義する関数はonload関数で定義されますが、参照可能になる前は、その関数で定義されているため、その関数内からのみ参照できます。 HTMLでそれらをグローバルとして参照します。 3つのオプションがあります
a)(最も簡単、迅速、理想的ではありません)-function blah(){}
をwindow.blah = function(){};
に変更して、関数をグローバルにします。
b)(理想的な方法)-控えめなJavascriptを使用して、JS内からのみDOM要素に動作をアタッチします。つまり、JSとは別のHTMLを意味します。
c)jsfiddleがonloadをラップしないようにします。 onLoad
をラップなし(bodyまたはhead)に変更します。
したがって、<p onclick="lol()" id="foo">
の代わりに、JSでのみvar e = document.getElementById('foo'); e.onclick = lol;
を実行します。
ベストプラクティスを促進するため、bをお勧めします。
フィドルで、左側のドロップダウンからno wrap (head)
を選択し、[実行]をクリックすると機能します。
onLoad
が選択されている場合、関数は$(document).ready(function() {});
のクロージャ内でのみ定義されます。
私は同じ問題を発見し、JavaScript設定でLoad Type
を変更することで解決しました:
ドロップダウンJavaScript設定メニューのNo wrap-in<head>
またはNo wrap-in<body>
。以下の画像を参照してください。
見る:
https://stackoverflow.com/a/4935684/679639
または、これを見ることをお勧めします:
https://stackoverflow.com/a/19110630/679639
私がテストしたものは次のとおりです。
function testJSON() {
var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}';
var tmp_obj = eval('(' + jsonString + ')');
document.getElementById("result").innerHTML = tmp_obj.param2;
}
そして
function testJSON() {
var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}';
var tmp_obj = JSON.parse(jsonString);
document.getElementById("result").innerHTML = tmp_obj.param2;
}
2番目のアプローチを使用することをお勧めします。
P.S.>私は JSを使用してJSON文字列からパラメーターを解析する方法 から来ました