JavaScript no se ejecuta en jsfiddle.net
El siguiente código funciona en un sitio activo pero no puedo ejecutarlo en el sitio jsfiddle .
Vea esto por ejemplo.
¿ Alguien puede decirme por qué no funciona en jsfiddle ?
En la consola registra: ReferenceError: fillList is not definedy ReferenceError: mySelectList is not defined.
El código funciona como puedes ver cuando está incrustado aquí como fragmento:
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>
Las funciones que usted define se definen en una función de carga, por lo que, mientras que antes eran referenciables, debido a que están definidas en esa función, solo se puede hacer referencia a ellas desde dentro de esa función. Los hace referencia como globales en su HTML. Tienes tres opciones
a) (más fácil, más rápido, no ideal): cambie function blah(){}para window.blah = function(){};hacer que las funciones sean globales.
b) (forma ideal): utilice Javascript discreto para adjuntar comportamiento a elementos DOM únicamente desde JS, es decir, separar HTML de JS.
c) Hacer que jsfiddle no envuelva las cosas al cargar. Cambie onLoada no envolver (cuerpo o cabeza).
Entonces, en lugar de <p onclick="lol()" id="foo">hacerlo, lo harías var e = document.getElementById('foo'); e.onclick = lol;solo en JS.
Recomiendo b ya que fomenta las mejores prácticas.
En su violín, seleccione no wrap (head)en el menú desplegable de la izquierda, haga clic en Ejecutar y funcionará.
Ver ejemplo →
Cuando onLoadse selecciona, sus funciones se definen dentro del cierre del $(document).ready(function() {});único.
