Question

我是JavaScript的新手。我需要在点击时随机更改图像。这是我的代码。怎么了？我试图制作一个骰子游戏，你掷骰子和图像值弹出。当我点击图像时，我只在屏幕上显示数字更改，但图像仅从1.jpg更改为6.jpg，这就是全部。

HTML

<img id="myImage" onclick="changeImage()" src="1.jpg" width="100" height="100">
<p id="pl" ></p>

JS

function myFunction() {
    var x = Math.floor((Math.random() * 6) + 1);
    document.getElementById("pl").innerHTML = x;
}

function changeImage() {
    var image = document.getElementById('myImage');
    var pl;

    pl = myFunction();
    if (pl == 1) {
        image.src = "1.jpg";
    } else if (pl == 2) {
        image.src = "2.jpg";
    } else if (pl == 3) {
        image.src = "3.jpg";
    } else if (pl == 4) {
        image.src = "4.jpg";
    } else if (pl == 5) {
        image.src = "5.jpg";
    } else {
        image.src = "6.jpg";
    }
}

Answer 1

请参阅此fiddle

将myFunction()更改为

function myFunction() {
  var x = Math.floor((Math.random() * 6) + 1);
  document.getElementById("pl").innerHTML = x;
  return x;
}

您没有将myFunction()的值返回到pl，导致6.jpg始终显示（因为它始终进入了else块）。

Answer 2

myFunction没有返回x，但您正在设置p1 = myFunction()，因此p1将等于undefined。添加一个return语句来修复：

function myFunction() {
    var x = Math.floor((Math.random() * 6) + 1);
    document.getElementById("pl").innerHTML = x;
    return x;
}

以下是其他一些指示：

您不需要多个<script>代码。您的所有代码都可以合二为一。
<script>标记应位于<head>或<body>内。 <html>包含<head>或<body> ^MDN以外的任何内容的无效标记（尽管它可能仍然有用）。< / LI>
请尝试使用if。

switch

更好的是，只需设置image.src = p1 + ".jpg"即可。它更容易阅读！
你错误地打开了<hml> tagg。

否则，您似乎正在成为一名出色的JavaScript开发人员！坚持下去！：）

Answer 3

你设置pl等于myFunction（）;.你真正想要的是设置pl等于document.getElementById（“pl”）。innerHTML。另外，确保myFunction（）在changeImage（）之前触发。这是一个JS小提琴工作https://jsfiddle.net/hdz7x23p/检查损坏的图像图标，看看源改变了。

var pl = document.getElementById("pl").innerHTML;

Answer 4

您需要在代码中进行两次小修正

返回值

return document.getElementById（＆＃34; pl＆＃34;）。innerHTML = x;

使用双引号

var image = document.getElementById（＆＃34; myImage＆＃34;）;

Answer 5

<!DOCTYPE html>
<html>
<body>


<img id="myImage"   src="1.jpg" onclick="changeImage()" width="100" height="100">

<p id="pl" ></p>

</body>

<script>
function myFunction() {
    var x = Math.floor((Math.random() * 6) + 1);
    return document.getElementById("pl").innerHTML = x;


}

</script>

<script>
function changeImage() {
    var image = document.getElementById("myImage");
    var pl;


    pl = myFunction();
    if (pl == 1) {
        image.src = "1.jpg";
    } else if (pl == 2) {
        image.src = "2.jpg";
    } else if (pl == 3) {
        image.src = "3.jpg";
    } else if (pl == 4) {
        image.src = "4.jpg";
    } else if (pl == 5) {
        image.src = "5.jpg";
    } else {
        image.src = "6.jpg";
        }
}
</script>


</html>

按ID更改图像

5 个答案:

请参阅此fiddle