+ 2

How can i make my dice work better..

I made this, ( only 1 and 2 show a picture now.. but i think you get the point.. ) https://code.sololearn.com/W3jaqCZP81qa/?ref=app Its a dice program that shows a picture of the result, but the pictures stack up, ( like if you get 1 and then 1 again they will stack up ) and also.. i dont know how to replace the picture when you get like a 2 instead of 1 so it only displays the 2 picture. So in short, could someone help me with this? 1. Make it so the pictures dont stack up 2. Replace picture that you only get 1 per result 3. Make all pictures the same size Thank you already alot!!!

16th Jun 2019, 8:32 PM
mine
mine - avatar
6 Respuestas
+ 4
No worries! In your JS, you seem to have declared 2 variables - img and img2 - that both have the purpose of changing the image. Rather than having different variables for each condition, changing all of them to just be named img should allow the code to run
17th Jun 2019, 12:30 PM
Faisal
Faisal - avatar
+ 6
Rather than creating a new element every time you role the dice, what I would do is change the div with the id of image to an <img> tag and just change the src based on what gets rolled. So with the element <img id = "image">, the js could be something like this: var img = document.getElementById("image"); img.src = "Source_of_image"; As for the size, you could just set a constant size for that element within the CSS to ensure that it stays the same size no matter the image: #image{ width: 20%; }
16th Jun 2019, 8:43 PM
Faisal
Faisal - avatar
+ 5
As you guessed, the problem seems to come as a result of using 2 variables when creating the images, so just using the img variable whenever you're creating a new image should let it run smoothly
17th Jun 2019, 12:04 PM
Faisal
Faisal - avatar
+ 3
Faisal im sorry, But i dont really understand what you mean.. ( i just started with coding html ) How can i only use the image variable?
17th Jun 2019, 12:23 PM
mine
mine - avatar
+ 3
Faisal thanks! it works :D
17th Jun 2019, 1:00 PM
mine
mine - avatar
+ 2
Hey, faisal. i tried what you said and i got this.. https://code.sololearn.com/Wf2t5fT7IIjo Well it seems a lot better now, But the images dont change.. ( it only displays the image with 1 ) Is it a problem with that i cant use if for multiple variables? Well if anyone could me me, Thanks!
17th Jun 2019, 9:35 AM
mine
mine - avatar