Hi there, I am in college right now and I am learning Javascript. I have a lab that requires I display three coloured buttons on the screen that are completely random in order. Now when these buttons are all green, all red, or all blue, you get a bonus to how many points you get. The code below is what I have so far, but right now I want to explain my thinking process and maybe get some help from you guys to help me better my thinking process. What my teacher told me to do was this.
at the start of body, create 3 image elements (<img>) with different id's.
put your script element on the bottom of the body.
in your script, after declaring those vars and assigning them random values, use document.getElementById to get those image elements and put them in their own variable
example: var button1 = document.getElementById("image1");
then create a function which takes two arguments; one will be one of the image elements you created variables for and the other will be the accompanying random number that you created.
In the function, change the src of the image to red if the number is 1, to green if the number is 2, to red if the number is 3 etc
call your function 3 times with the proper variables and you'll be good to go
Now I tried my best to make sense of it, but I just could not figure it out. Basically what I am thinking here is that you are making an image tag and giving it an id so in the future you can use the id for something else. It will take the properties of the image tag. Then you set your 3 variables for random numbers. Each of these vars will be assigned to a different button (so 3 in total) then next is where I get really confused. I guess my main question is, is how do you randomize the buttons using code close to what I have here. I have not learned loops or arrays yet so if I do get any help, try not to use those. Also you can see how somewhere in there I tried to do an if statement but it just wasn't making sense to me.
<!doctype html><html><head></head><body><img id = "button1"><img id = "button2"><img id = "button3"></body><script>var randomNumberOne = Math.ceil(Math.random() * 3);var randomNumberTwo = Math.ceil(Math.random() * 3);var randomNumberThree = Math.ceil(Math.random() * 3);var red = document.getElementById("button1").src="red.jpg";var green = document.getElementById("button2").src="green.jpg";var blue = document.getElementById("button3").src="blue.jpg";function randomButton(){ if(randomNumberOne === 1) { }}randomButton();</script></html>