JavaScript не работает на jsfiddle.net - PullRequest
Новая
       5

JavaScript не работает на jsfiddle.net

72 голосов
/ 29 марта 2011

Код ниже работает на живом сайте, но я не могу запустить его на сайте 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>

Ответы [ 4 ]

91 голосов
/ 29 марта 2011

Функции, которые вы определяете, определены в функции onload, так что, прежде чем они были ссылочными, потому что они определены в этой функции, на них можно ссылаться только из этой функции.Вы упоминаете их как глобальные в вашем HTML.У вас есть три варианта

a) (самый простой, быстрый, не идеальный) - измените function blah(){} на window.blah = function(){};, сделав функции глобальными.

b) (идеальный способ) - используйте ненавязчивый Javascriptпривязывать поведение к элементам DOM только изнутри JS, что означает отделение HTML от JS.

в) Сделайте так, чтобы jsfiddle не переносил содержимое при загрузке.Измените onLoad на "без переноса" (тело или голова).

Так что вместо <p onclick="lol()" id="foo"> вы бы сделали var e = document.getElementById('foo'); e.onclick = lol; только в JS.

Я рекомендую b, так как это лучше всего подходитпрактика.

48 голосов
/ 29 марта 2011

В скрипте выберите no wrap (head) в выпадающем меню слева, нажмите Run, и оно будет работать.

См. Пример →

Когда выбран onLoad, ваши функции определяются только при закрытии $(document).ready(function() {});.

5 голосов
/ 01 июля 2016

Я нашел ту же проблему и решил ее, изменив Load Type в настройках JavaScript:

No wrap-in<head> или No wrap-in<body> в раскрывающемся меню настроек JavaScript. См. Изображение ниже.

Меню настроек JavaScript

0 голосов
/ 23 октября 2016

Посмотрите на:

https://stackoverflow.com/a/4935684/6796393

Или лучше увидеть это:

https://stackoverflow.com/a/19110630/6796393

Вот что я тестировал: 

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;
}

Лучше использовать второй подход.

PS> Я пришел из Как разобрать параметры из строки JSONиспользуя JS?

...