jsfiddle.netでJavaScriptが実行されない
質問
以下のコードはライブサイトでは動作するのですが、サイト上で実行させることができません。 jsfiddle .
参照 この を例として挙げます。
に効かないのはなぜか、どなたか教えてください。 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要素に動作を添付します。
c) jsfiddleがオンロードのものをラップしないようにする。変更
onLoad
をラップしないようにします(ボディまたはヘッド)。
ということで、代わりに
<p onclick="lol()" id="foo">
の代わりに
var e = document.getElementById('foo'); e.onclick = lol;
をJSのみで使用します。
ベストプラクティスを促すので、bを推奨します。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptでJSONをパースする?[重複している]
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
-
[解決済み] なぜ私のJavaScriptはJSFiddleで動作しないのですか?