我只是在学习一些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");
然后没有任何作用。这是一个指向&#34; live&#34;的链接。网站上的。 http://176.32.230.6/mejorarcr.com/
任何帮助将不胜感激。谢谢!
答案 0 :(得分:3)
您必须更改代码中的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+'" />';
}
答案 1 :(得分:1)
变化:
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";