JavaScript не працює на jsfiddle.net

Question 1

Наведений нижче код працює на реальному сайті, але я не можу змусити його запуститись на сайті 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>

Розгорніть фрагмент

Question 2

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

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

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

в) Зробіть jsfiddle не обгортати речі на завантаження. Змініть onLoadна відсутність обгортання (тіла або голови).

Тому замість того, <p onclick="lol()" id="foo">щоб робити var e = document.getElementById('foo'); e.onclick = lol;це лише в JS.

Я рекомендую b, оскільки він заохочує найкращі практики.

Question 3

У вашому скрипті виберіть no wrap (head)у випадаючому списку ліворуч клацніть Виконати, і це буде працювати.

Див. Приклад →

Якщо onLoadвибрано, ваші функції визначаються в рамках закриття $(document).ready(function() {});єдиного.

Question 4

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

No wrap-in<head>або No wrap-in<body>у спадному меню налаштувань JavaScript. Зверніться до зображення нижче.

Меню налаштувань JavaScript

Question 5

Подивись на:

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 String за допомогою JS?