Question

由于我无法识别的原因，这没有被成功调用，我已经尝试了所有我能想到的东西，但似乎没有任何东西可以使它工作，它没有错误。



<img id="risk" src="assets/R0.png" width="100" height="150" style="border: dotted;"><br>
<button id="ContinueBtn" onclick="Continue()">Continue</button>

if (document.getElementById("risk").src == "assets/R0.png"){    
    document.getElementById("risk").src = "assets/R1.png";
}
else if (document.getElementById("risk").src == "assets/R1.png"){
    document.getElementById("risk").src = "assets/R2.png";
}
else if (document.getElementById("risk").src == "assets/R2.png"){
    document.getElementById("risk").src = "assets/RF.png";
    document.getElementById("happiness").src = "assets/PF.png";
    document.getElementById("main").src = "assets/fired.png";
    alert("Debug")

    var Cont = document.getElementById("ContinueBtn");
    Cont.parentNode.removeChild(Cont);
}

<img id="risk" src="assets/R0.png" width="100" height="150" style="border: dotted;"><br> <button id="ContinueBtn" onclick="Continue()">Continue</button> if (document.getElementById("risk").src == "assets/R0.png"){ document.getElementById("risk").src = "assets/R1.png"; } else if (document.getElementById("risk").src == "assets/R1.png"){ document.getElementById("risk").src = "assets/R2.png"; } else if (document.getElementById("risk").src == "assets/R2.png"){ document.getElementById("risk").src = "assets/RF.png"; document.getElementById("happiness").src = "assets/PF.png"; document.getElementById("main").src = "assets/fired.png"; alert("Debug") var Cont = document.getElementById("ContinueBtn"); Cont.parentNode.removeChild(Cont); }

当我向它添加一个else语句时，它会传递if和elseif，使它看起来好像找不到任何“风险”，

else{
    alert("An error has occured! Try refreshing your page.")
}

Answer 1

简答：

在JS中测试.src属性时，即使原始标记仅指定了相对路径，某些浏览器也会报告图像的完整路径。这意味着您的==比较将失败。

答案很长：

假设在元素创建之后，我认为您会发现问题在于您设置的src您的html中的内容与测试.src属性时报告的内容不同。如果您的源代码设置src的相对路径，您可能会发现浏览器报告的.src属性值实际上是完整路径。所以，例如：

<img src="assets/R0.png">

......然后：

console.log(document.getElementById("risk").src);

...将记录"http://www.yourdomainhere.com/fullpath/assets/R0.png"

与==比较时，当然不会相同。显然，您可以通过在第一个if之前添加console.log()语句来轻松测试它（如果必须，可以使用alert()）。每当您发现if语句未按预期执行时，首先要尝试的是添加表达式中涉及的console.log()变量，以便您可以确定< / em>他们拥有您认为他们所做的价值。

如果正在发生什么，那么你显然只需要使用字符串函数来提取路径的最后一条路径。 E.g：

var imgEl = document.getElementById("risk"), imgSrc = imgEl.src.split("/").pop(); if (imgSrc == "R0.png"){ imgEl.src = "assets/R1.png"; } else if (imgSrc == "R1.png") { imgEl.src = "assets/R2.png"; } // etc.

我使用的代码imgEl.src.split("/").pop()采用完整路径并使用.split()创建一个数组，其中包含正斜杠之间的所有部分，然后.pop()采用最后一个“piece”，即最后一个数组元素。

（我还引入了一个变量imgEl来引用你的img元素，因为它比为同一个元素重复调用document.getElementById()更加整洁和高效。

Answer 2

尝试使用RegExp：

var risk = document.getElementById("risk");
if (risk.src.match("assets/R0.png")){    
    risk.src = "assets/R1.png";
} else if(condition) {
    ...
} else {
    ...
}

如果/ elseif语句不起作用

2 个答案: