Сбой при переключении изображений

Question

Я просто изучаю java. В настоящее время я изучаю инструкции if else.

В игре, которую я создаю, пользователь выбирает число от 0 до 10 и помещает его в поле ввода. Если это правильно, изображение на экране меняется на одно изображение, если оно неверно, оно переключается на другое изображение. Однако я не могу заставить изображения вообще меняться. Я пробовал несколько разных способов кодирования; В настоящее время я использую массив img. Однако, когда я делаю код, я получаю ошибку ObjectHTMLImageElement.

Вот мой текущий код:

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

Я также попытался с помощью линий, таких как: document.getElementById("image").innerHTML=document.getElementById("manpie");

, а затем ничего не работает. Вот ссылка на «живой» сайт, на котором он включен. http://176.32.230.6/mejorarcr.com/

любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Вы должны изменить значение innerHTML в вашей код:

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 или this

Answer 2

изменение:

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

к:

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

убедитесь imgArray [0] является фактический путь изображения:

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

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