3
我的项目在这里：http://jsfiddle.net/2SYvR/2/ 问题是：如果我尝试在普通文件的浏览器中运行此项，则不会显示任何字词。但是，如果我将所有文件放在jsfiddle中并将其设置为onDomReady，它会突然生效。那么如何将onDomReady添加到您的文档？如何将onDomReady添加到我的文档中？
编辑：
在的jsfiddle，您可以设置框架 'onDomReady'，然后我的代码工作。但是，当我设置的框架的OnLoad，我的代码不工作了......
EDIT2：
我解决我的问题。我用jsfiddle.me/2SYvR/3/show来检查它。事实证明，我的JavaScript没有正确的顺序。首先是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.
也不管用... – user1761155