如何将 onDomReady 添加到我的文档中?

How to add onDomReady to my document?(如何将 onDomReady 添加到我的文档中?)

问题描述

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

My project is here: http://jsfiddle.net/2SYvR/2/ The problem is: if I try to run this in my browser with the regular files, no word is showing up. However, if I put all my files in jsfiddle and set it to onDomReady, it suddenly works. So how do you add onDomReady to your document?

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

In JSFiddle, you can set the framework to 'onDomReady', then my code works. But when I set the framework to OnLoad, my code doesn't work anymore...

我解决了我的问题.我用 jsfiddle.me/2SYvR/3/show 来检查它.事实证明，我的 javascripts 的顺序不正确.首先是 jQuery 库，然后是我的 js.不过感谢您的快速反应.

I solved my problem. I used jsfiddle.me/2SYvR/3/show to inspect it. And it turned out that my javascripts weren't in the right order. First the jQuery libraries and then my js. Thanks though for the quick reactions.

(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", "f374r", "gegen",
            "ohne", "um", "entlang"
        ],
        derdeNaamval = [
            "aus", "bei", "mit", "nach", "seit",
            "von", "zu", "entgegen", "au337er",
            "gegen374ber", "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.

推荐答案

把你的代码放进去:

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

这篇关于如何将 onDomReady 添加到我的文档中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！