I got a strange problem. I have a slider with a starting value. But when I change the value of the slider (by sliding it). My slider value in javascript isn't updated. How is it possible to let this work.
The var 'aantal' has to be the value of the slider.
//<![CDATA[
$(function(){
/// 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(){
/// 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.
});//]]>
