有故障切换图像

Question

我只是在学习一些java。 我目前正在学习，否则陈述。

在我正在创建的游戏中，用户选择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或者这个

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