以下应该有效 - 请原谅谷歌翻译；）
http://jsfiddle.net/Tbg6G/
您需要处理一些事情，以便有一个事件（由用户单击按钮触发）开始下一个问题。稍后我将在此处发布代码以及评论。
标记
<div id="partituur"></div>
<div id="antwoord"></div>
<div id="buttons">
<button type="button" id="derde">
Derde
</button>
<button type="button" id="vierde">
Vierde
</button>
<button type="button" id="keuze">
Keuze
</button>
</div>
javascript
/// first off wrap all our code in our own scope, this means we keep our vars
/// to ourselves and don't mess up anyone elses code - doesn't usually matter
/// with your own app, but good practice is good practice.
(function(){
/// 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 antwordenPartituur = 0; /// store the score count
var antwoordVerwacht = null; /// keep a reference to the expected answer
/// reformatted your arrays to better fit with SO layout ;)
var vierdeNaamval = [
"bis", "durch", "für", "gegen",
"ohne", "um", "entlang"
],
derdeNaamval = [
"aus", "bei", "mit", "nach", "seit",
"von", "zu", "entgegen", "außer",
"gegenüber", "an...vorbei"
],
keuzevoorzetsel = [
"an", "auf", "hinter", "neben", "in",
"über", "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 === vierdeNaamval ) {
antwoordVerwacht = '3';
}
else if ( a === derdeNaamval ) {
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!');
antwordenPartituur++;
}
/// otherwise tell them not and downgrade score :(
else {
alert('wrong!');
antwordenPartituur--;
}
/// collect the answer
antwoordenAnswers.push( corrigeren );
/// output the score to the user
zettenPartituur( antwordenPartituur );
/// 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 ) {
/// 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(antwordenPartituur);
/// 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.