web-dev-qa-db-fra.com

JavaScript ne fonctionne pas sur jsfiddle.net

Le code ci-dessous fonctionne sur un site actif, mais je ne parviens pas à l'exécuter sur le site jsfiddle .

Voir this par exemple.

Quelqu'un peut-il me dire pourquoi cela ne fonctionne pas sur jsfiddle ?

Sur la console, il enregistre: ReferenceError: fillList is not defined et ReferenceError: mySelectList is not defined.

Le code fonctionne comme vous pouvez le voir lorsqu'il est incorporé ici sous forme d'extrait:

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>

javascripthtmljsfiddle
69
Leahcim

Les fonctions que vous définissez sont définies dans une fonction onload, alors qu'avant, elles étaient référençables, elles ne peuvent être référencées qu'à partir de cette fonction, car elles sont définies dans cette fonction. Vous les référencez sous forme de globals dans votre code HTML. Vous avez trois options

a) (le plus facile, le plus rapide, pas idéal) - changez function blah(){} en window.blah = function(){}; en rendant les fonctions globales.

b) (moyen idéal) - utilisez du code Javascript non intrusif pour associer un comportement aux éléments DOM de l'intérieur du JS uniquement, ce qui signifie que le code HTML est distinct de celui de JS. 

c) Faites que le jsfiddle n'enroule pas le contenu. Remplacez onLoad par aucune enveloppe (corps ou tête).

Ainsi, au lieu de <p onclick="lol()" id="foo">, vous feriez var e = document.getElementById('foo'); e.onclick = lol; dans le JS uniquement.

Je recommande b, car cela encourage les meilleures pratiques.

88
meder omuraliev

Dans votre violon, sélectionnez no wrap (head) dans le menu déroulant à gauche, cliquez sur Run et cela fonctionnera.

Voir exemple →

Lorsque onLoad est sélectionné, vos fonctions sont définies uniquement à la fermeture de $(document).ready(function() {});.

48
mVChr

J'ai trouvé le même problème et je l'ai résolu en modifiant Load Type dans les paramètres JavaScript:

No wrap-in<head> ou No wrap-in<body> dans le menu déroulant des paramètres JavaScript. Reportez-vous à l'image ci-dessous.

Menu Paramètres JavaScript

5
Don D

Regarder:

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

Ou il vaut mieux voir celui-ci: 

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

Voici ce que j'ai testé:

function testJSON() { 
    var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}'; 
    var tmp_obj = eval('(' + jsonString + ')');
    document.getElementById("result").innerHTML =  tmp_obj.param2;
}

et 

function testJSON() { 
    var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}'; 
    var tmp_obj = JSON.parse(jsonString);
    document.getElementById("result").innerHTML =  tmp_obj.param2;
}

Il vaut mieux utiliser la deuxième approche.

P.S.> Je viens de Comment analyser les paramètres de JSON String avec JS?

0
Yeldar Kossynbay