1. ホーム
  2. javascript

jsfiddle.netでJavaScriptが実行されない

2023-12-25 08:39:24

質問

以下のコードはライブサイトでは動作するのですが、サイト上で実行させることができません。 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を推奨します。