JavaScript ne s'exécute pas sur jsfiddle.net

Question

Le code ci-dessous fonctionne sur un site mais je ne peux pas le faire fonctionner sur jsfiddle.net . Voir http://jsfiddle.net/mjmitche/afPrc/

Quelqu'un peut me dire pourquoi ça ne fonctionne pas sur jsfiddle?

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

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

Answer 1

Les fonctions que vous définissez sont définies dans une fonction onload, de sorte alors qu'avant ils étaient référençable, parce qu'ils sont définis dans cette fonction, ils ne peuvent être référencés à l'intérieur de cette fonction. Vous faites référence à eux comme globales dans votre code HTML. Vous avez trois options

a) la plus simple, la plus rapide, pas l'idéal ) - variation function blah(){} de window.blah = function(){}; faisant les fonctions globales.

b) ( moyen idéal ) - utilisation de Javascript discret pour attacher le comportement d'éléments du DOM à partir de l'intérieur de la JS uniquement, sens distinct HTML JS.

c) Faire le jsfiddle pas envelopper les choses onload. Variation onLoad pas de retour à la ligne ( du corps ou de la 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 de b, car il encourage les meilleures pratiques.

Answer 2

Dans votre violon sélectionnez no wrap (head) dans la liste déroulante sur la gauche, cliquez sur Exécuter et de travail.

Voir l'exemple →

Lors de l' onLoad est sélectionné, vos fonctions sont définies au sein de la fermeture de l' $(document).ready(function() {}); seulement.