Hi out there, I'm new at javascript so forgive my stupidity.
I know there's something fundamental here that i'm not getting.
What I'm attempting is to do a basic IF - ELSE statement within a function that's hooked up to various buttons. Ideally what I'd like to happen is IF the correct button is clicked - the correct image from the array will display - ELSE the wrong button is clicked - another image from the array displays. The result icons are shown within a div form . Here's the mess I've got so far , if there's a more elegant approach perhaps with a switch statement ? I'd be really grateful for anyone's help.
<!DOCTYPE html>
<html>
<head>
<h1>array test 4</h1>
<script>
var noteList = new Array("a", "as", "b", "c", "q", "x");
var notes = new Array(6)
var buttonList = new Array("abtn", "asbtn", "bbtn", "cbtn");
var buttons = new Array(4)
function initialize() {
notes[0] = new Image(50, 50);
notes[0].src = "A.png";
notes[1] = new Image(50, 50);
notes[1].src = "As.png";
notes[2] = new Image(50, 50);
notes[2].src = "B.png";
notes[3] = new Image(50, 50);
notes[3].src = "C.png";
notes[4] = new Image(50, 50);
notes[4].src = "question.png";
notes[5] = new Image(50, 50);
notes[5].src = "wrong.png";
buttons[0] = new Image(50, 50);
buttons[0].src = "Abtn.png";
buttons[1] = new Image(50, 50);
buttons[1].src = "Asbtn.png";
buttons[2] = new Image(50, 50);
buttons[2].src = "Bbtn.png";
buttons[3] = new Image(50, 50);
buttons[3].src = "Cbtn.png";
}
function upDate() {
if (buttons[0] == notes[0]) {
}
document.imgDisplay.src = notes[0].src
}
</script>
</head>
<body>
<center>
<form name = "myForm">
<img src = "question.png" name = "imgDisplay" height = 100 width = 100>
</form>
</center>
<div>
<input type="image" />
<input type="image" />
<input type="image" />
<input type="image" />
</div>
</body>
</html>
Sorry guys, I'll try to be a bit clearer. The upshot is I'm attempting to create a music note naming game ( for my students). Ideally there will be a row of 12 buttons (each showing a note - A, A#,B,C, C# plus 7 more ) . Above each button will be a series of 12 circular question icons that will fade in one at a time along a random x axis.The position along the x.axis will determine the note name ( i.e. A at 50 - A# at 80 - B at 110 etc...). When the question icon fades in - that becomes a prompt to click one of the note buttons underneath. If the appropriate button is pressed a green circular note icon will replace the question icon. If the incorrect button is pressed a red incorrect will replace it instead. Then another question note fades in to start the selection process over . Hope this makes it clearer?
Wish I could post a mockup screenshot with description to make things clearer but I don't think that's possible within this forum ?
Submit an article or tip