通过 id 更改图像

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 不是 returning 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 之外的任何内容的无效标记（尽管它可能仍然有效）。
尝试使用 switch.

if

更好的是，只需设置 image.src = p1 + ".jpg"。阅读起来更容易了！
你打错了开头 <hml> 标签。

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

Answer 3

您将 pl 设置为等于 myFunction();。您真正想要的是将 pl 设置为等于 document.getElementById("pl").innerHTML。另外，确保 myFunction() 在 changeImage() 之前触发。这是在 JS fiddle 工作 https://jsfiddle.net/hdz7x23p/ 检查损坏的图像图标以查看源更改。

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

Answer 4

您需要在代码中做两个小的更正

Return值

return document.getElementById("pl").innerHTML = x;

使用双引号

var image = document.getElementById("myImage");

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 更改图像

Change image by id

html

javascript

random

numbers

image

看到这个fiddle