Avendo problemi nel cambiare le immagini

Question

Sto imparando un po 'di java. Attualmente sto imparando se, altrimenti affermazioni.

Nel gioco che sto creando, l'utente seleziona un numero compreso tra 0 e 10 e lo inserisce in una casella di immissione. Se corretta, l'immagine sullo schermo cambia in un'immagine, se non corretta, passa a un'immagine diversa. Tuttavia, non riesco a far cambiare le immagini. Ho provato diversi modi di codifica; Attualmente sto usando un array img. Tuttavia, quando faccio il codice ricevo un errore ObjectHTMLImageElement.

Ecco il mio codice corrente:

<div id="top"> 
    <h1>Pie in the Face</h1> 
    <p>Guess how many fingers I'm holding up between 0 and 10. 
     <br /> If you guess correctly, I get a pie in the face. 
     <br /> If you guess wrong, you get a pie in the face.</p> 

    <input id="answer" /> 
    <button id="myButton">Submit</button> 
    </center> 
</div> 
<div id="container"> 
    <div id="image"></div> 
    <div id="manpie"></div> 
    <div id="girlpie"></div> 
</div> 


<script type="text/javascript"> 
    var x = Math.random(); 

    x = 11 * x; 
    x = Math.floor(x); 

    var imgArray = new Array(); 

    imgArray[0] = new Image(); 
    imgArray[0].src = "images/manpie2.jpg"; 

    imgArray[1] = new Image(); 
    imgArray[1].src = "images/girlpie2.jpg"; 


    document.getElementById("myButton").onclick = function() { 

     if (x == document.getElementById("answer").value) { 
      document.getElementById("image").innerHTML = imgArray[0]; 

      // what I had document.getElementById("image").innerHTML=imgArray[0]; 

     } else { 
      document.getElementById("image").innerHTML = imgArray[1]; 
     } 

    } 
</script> 

</body> 

Ho provato anche utilizzando linee come: document.getElementById("image").innerHTML=document.getElementById("manpie");

e quindi non funziona niente. Ecco un link al sito "live" su cui è attivo. http://176.32.230.6/mejorarcr.com/

qualsiasi aiuto sarebbe apprezzato. Grazie!

Answer 1

Devi cambiare il valore innerHTML nella vostra codice:

if (x==document.getElementById("answer").value) { 
      document.getElementById("image").innerHTML='<img src="'+imgArray[0].src+'" />'; 

      // what I had document.getElementById("image").innerHTML=imgArray[0].src; 

     } else { 
     document.getElementById("image").innerHTML='<img src="'+imgArray[1].src+'" />'; 
     } 

DEMO o this

Answer 2

cambiamento:

document.getElementById("image").innerHTML=imgArray[0]; 

a:

document.getElementById("image").setAttribute("src", imgArray[0]); 

assicurarsi imgArray [0] è il percorso dell'immagine attuale:

  imgArray[0]="images/manpie2.jpg"; 

      imgArray[1]="images/girlpie2.jpg";