javascript - 如何将 onDomReady 添加到我的文档？

Question

我的项目在这里:http://jsfiddle.net/2SYvR/2/问题是:如果我尝试在浏览器中使用常规文件运行它，则不会显示任何单词。但是，如果我将所有文件放入 jsfiddle 并将其设置为 onDomReady，它会突然起作用。那么如何将 onDomReady 添加到文档中呢？

编辑:

在 JSFiddle 中，您可以将框架设置为“onDomReady”，然后我的代码就可以运行。但是当我将框架设置为 OnLoad 时，我的代码不再工作......

编辑2:

我解决了我的问题。我使用 jsfiddle.me/2SYvR/3/show 来检查它。结果发现我的 JavaScript 的顺序不正确。首先是 jQuery 库，然后是我的 js。不过还是感谢您的快速 react 。

(function(){
    /// Hiermee kun je de lengte van je oefening bepalen.
    //var aantal = prompt("Tot hoever wil je oefenen? Geef een nummer op.");


    var aantal = $("#slider1").val();


    /// might as well store an array with each answer, could be improved
    /// by storing the question as well - so in the end you could give
    /// the user a summary.
    var antwoordenAnswers = [];
    var antwoordenPartituur = 0;  /// store the score count
    var antwoordVerwacht = null; /// keep a reference to the expected answer
    /// reformatted your arrays to better fit with SO layout ;)


    // all special characters: http://kompoos.nl/manuals/ascii/javascript-special-characters.html
    // \337 = ß
    // \374 = ü
        var vierdeNaamval = [
            "bis", "durch", "f\374r", "gegen",
            "ohne", "um", "entlang"
        ],
        derdeNaamval = [
            "aus", "bei", "mit", "nach", "seit",
            "von", "zu", "entgegen", "au\337er",
            "gegen\374ber", "an...vorbei"
        ],
        keuzevoorzetsel = [
            "an", "auf", "hinter", "neben", "in",
            "\374ber", "unter", "vor", "zwischen"
        ];

    /// added some translation vars for English people 
    /// out there (and to help me)
    var accusative = vierdeNaamval,
        dative = derdeNaamval,
        choicePreposition = keuzevoorzetsel;

    /// to aid with a random choice it's nice to work with arrays
    var opties = [vierdeNaamval, derdeNaamval, keuzevoorzetsel];
    var options = opties;

    /// ... then we can use a function like this to grab a random item
    var getRandomItem = function( a ){
        return a[Math.floor((a.length)*Math.random())];
    };

    /// handle writing the question, as stated 
    /// by @AvlinWong - don't use document.write()
    var vraagQuestion = function(){
        /// use our simple get random item from array function
        var a = getRandomItem( opties );
        /// set the expected answer
        if ( a === derdeNaamval ) {
            antwoordVerwacht = '3';
        }
        else if ( a === vierdeNaamval ) {
            antwoordVerwacht = '4';
        }
        else if ( a === keuzevoorzetsel ) {
            antwoordVerwacht = 'k';
        }
        /// choose a random question item from the list
        var b = getRandomItem( a );
        /// target the output element and change it's HTML
        document.getElementById('antwoord').innerHTML = b;
    };

    /// a simple function to better explain the act of updating the score
    /// in the GUI/HTML.
    var zettenPartituur = function( a ){
       document.getElementById('partituur').innerHTML = a;
    };

    /// clickOnTheButton --- hope the translation is right :)
    var klikOpDeKnop = function(e){
        /// because we are relying on pure javascript, different browsers
        /// have different event objects - srcElement for old IE, target
        /// for everything else...
        var a = e.target ? e.target : e.srcElement;
        var corrigeren = null;
        /// because each button has a unique id, we can do this
        switch ( a.id ) {
            case 'derde':
                corrigeren = ( antwoordVerwacht == '3' );
            break;
            case 'vierde':
                corrigeren = ( antwoordVerwacht == '4' );
            break;
            case 'keuze':
                corrigeren = ( antwoordVerwacht == 'k' );
            break;
        }
        /// if they were correct, tell them so and update score
        if ( corrigeren ) {
            //alert('good!');
            antwoordenPartituur++;  
            document.getElementById('goed').style.visibility="visible";
            document.getElementById('fout').style.visibility="hidden";
        }
        /// otherwise tell them not and downgrade score :(
        else {
           // alert('wrong!');
            antwoordenPartituur--;
            document.getElementById('goed').style.visibility="hidden";
            document.getElementById('fout').style.visibility="visible";

        }

        /// collect the answer
        antwoordenAnswers.push( corrigeren );
        /// output the score to the user
        zettenPartituur( antwoordenPartituur );
        /// because we are storing an array of answers it's easy
        /// to tell how many there have been by .length of the array
        //if ( antwoordenAnswers.length > 10 ) {
          if ( antwoordenPartituur >= aantal ) {    
            /// all done!
            alert("Hoera! Je bent klaar!! / You're done!!");
        } else {
            /// generate a new question
            vraagQuestion();
        }
    }
    /// using a simple window.onload will mean we know that we can
    /// start messing around with the HTML on the page. This could
    /// be improved using addEventListener/attachEvent but as this
    /// is your own app with bespoke code you don't need to worry.
    /// Unless you start using any plugins or third-party libraries.
    window.onload = function(){

        /// target the button wrapper in the HTML
        var wikkelWrapper = document.getElementById('buttons'),
            /// find all buttons within wrapper
            knoppenButtons = wikkelWrapper.getElementsByTagName('button'),
            i, l = knoppenButtons.length, a;

        /// step each button found and apply an event listener using the
        /// more accepted and improved addEventListener/attachEvent methods
        /// there are many reasons as to why these are better to use
        /// just search StackOverflow for reasons as to why :)
        for(i=0; i<l; i++){
            a = knoppenButtons[i];
            /// for all good browsers
            if ( a.addEventListener ) {
                a.addEventListener('click', klikOpDeKnop);
            }
            /// for good ol' Internet Explorer
            else if ( a.attachEvent ) {
                a.attachEvent('onclick', klikOpDeKnop);
            }
        };

        /// set the ball rolling / stelt u de bal aan het rollen
        /// first set the output of the score
        zettenPartituur(antwoordenPartituur);
        /// then set the first question
        vraagQuestion();

    }

})(); /// this construction can be confusing, it basically just creates
/// a new anonymous function and then executes it straight away. we are
/// using the anon function for it's scope so that we keep our variables
/// and methods separated from other code.

Answer 1

只需将您的代码放入其中即可:

window.onload = function() {
//code here
}