我的项目在这里：http: //jsfiddle.net/2SYvR/2/ 问题是：如果我尝试在我的浏览器中使用常规文件运行它，则不会出现任何单词。但是，如果我将所有文件都放在 jsfiddle 中并将其设置为 onDomReady，它会突然起作用。那么如何将 onDomReady 添加到文档中呢？
编辑：
在 JSFiddle 中，您可以将框架设置为“onDomReady”，然后我的代码就可以工作了。但是当我将框架设置为 OnLoad 时，我的代码不再工作了......
编辑2：
我解决了我的问题。我用 jsfiddle.me/2SYvR/3/show 来检查它。事实证明，我的 javascripts 的顺序不正确。首先是 jQuery 库，然后是我的 js。不过感谢您的快速反应。
(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.