javascript - 切换图像时遇到问题

标签 javascript html css object

我只是在学习一些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/

如有任何帮助,我们将不胜感激。谢谢!

最佳答案

您必须更改代码中的 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+'" />';
         }

DEMOthis

关于javascript - 切换图像时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30248854/

相关文章:

javascript - 重新编译 build.py 文件时缺少 goog.date 的提供程序 - google blockly

javascript - 创建具有自动调整大小的文本区域

调整浏览器大小时html移动

html - anchor 标记元素之间的 CSS 不需要的间距

javascript - 两个用于滑动相同 div 但方式不同的按钮(从右到左和从左到右)

html - 如何使这个按钮在触摸设备中可点击?

javascript - PHP 依赖于 Javascript 函数

javascript - 没有客户端密码的 OAuth2——可能是网络钓鱼?

html - 0 x 0 像素 : html doesn't apply their proper dimensions

javascript - 如何使用 HTML、CSS 和 Javascript 制作幻灯片,在 iPhone 的图像上显示应用程序的图像?