Problemy z przełączaniem obrazów

Question

Po prostu uczę się java. Obecnie uczę się, czy, w przeciwnym razie, stwierdzeń.

W grze, którą tworzę, użytkownik wybiera liczbę od 0 do 10 i umieszcza ją w polu wprowadzania. Jeśli jest prawidłowa, obraz na ekranie zmienia się w jedno zdjęcie, jeśli jest nieprawidłowe, przełącza się na inny obraz. Jednak nie wydaje mi się, żeby obrazy w ogóle się zmieniły. Próbowałem kilku różnych sposobów kodowania; Obecnie używam tablicy img. Jednak gdy wykonuję kod, otrzymuję błąd ObjectHTMLImageElement.

Tu jest mój bieżący kod:

<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> 

Próbowałem również przy użyciu linii takich jak: document.getElementById("image").innerHTML=document.getElementById("manpie");

i wtedy nic nie działa. Oto link do strony "na żywo", na której się znajduje. http://176.32.230.6/mejorarcr.com/

każda pomoc byłaby doceniana. Dziękuję Ci!

Answer 1

Trzeba zmienić wartość w innerHTML swoje kod:

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 lub this

Answer 2

zmiana:

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

do:

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

upewnić imgArray [0] jest rzeczywistą ścieżkę obrazu:

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

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