根据函数结果使用 JavaScript 更改图像

change image using javascript based on function result

本文关键字：JavaScript 图像 函数 结果      更新时间：2023-09-26

我一直在寻找并试图解决这个问题几个小时，但我似乎错过了一些东西。基本上，我正在尝试这样做，因此如果我单击链接/按钮，它会执行一个脚本以在函数中按指定数量增加或减少数字。（在本例中为 1）

我尝试显示的图像文件应该根据最终结果而变化。 但图像永远不会改变。

任何建议都非常感谢

<script type="text/javascript">
var p1hps = 20;
var p1hpimage
function p1p1Click() {
    p1hps = (p1hps +1);
    function p1health(){
    };
}
function p1health() {
    p1hpimage = "images/p1" + p1hps + ".png";
    document.getElementById('p1hp').src = p1health();
}
</script>


<body>
<a href="#" onclick="p1p1Click()"><img src="images/p1p1.png" width="165" height="87" alt=""></a>
<img src="images/p120.png" id="p1hp" width="324" height="252" alt="">
</body>
您需要在

p1p1Click内部调用p1health函数，而不是在p1p1Click中声明另一个名为p1health的函数。

此外，图像src属性，您需要分配变量的值p1hpimage而不是递归调用 p1health 方法

var p1hps = 20;
function p1p1Click() {
    p1hps++;
    p1health();
}
function p1health() {
    var p1hpimage = "images/p1" + p1hps + ".png";
    document.getElementById('p1hp').src = p1hpimage ;
}

演示：小提琴 - 使用开发工具检查源代码以查看 src 是否更新

试试这个：

var _myPicArray =new Array("pic1.png","pic2.png","pic3.png");
function p1health(n) {
    document.getElementById('p1hp').src = myPicArray[n] ;
}
相关文章：