通过 id 更改图像答案

【问题标题】：Change image by id通过 id 更改图像
【发布时间】：2016-06-10 02:52:54
【问题描述】：

我是 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";
    }
}

【问题讨论】：

运行这个会发生什么？
当我点击图片时，我只会在屏幕上看到数字的变化，但图片只会从 1.jpg 变为 6.jpg，仅此而已。
在你的函数中返回 x

标签： javascript html image random numbers

【解决方案1】：

<!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>

【讨论】：

【解决方案2】：

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

返回值

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

使用双引号

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

【讨论】：

【解决方案3】：

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 以外的任何内容都是无效的标记（尽管它可能仍然有效）。
不要使用巨大的if 语句，而是尝试使用switch。
更好的是，只需设置image.src = p1 + ".jpg"。它更容易阅读！
你拼错了你打开<hml>标签。

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

【讨论】：

@LakyJ 如果这个或任何答案已经解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。编码快乐！

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

看到这个fiddle

如下更改您的myFunction()

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

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

【讨论】：