Question

我试图在功能结束时更改图像。在IF图像应该改变，而在其他方面，图像保持不变。

HTML

    <img class="owner" id="regina" src="img/uk-profile.jpg" alt="Great Britain">
  <p class="fort"><b>Fort: </b><span  id="wall">1000</span></p>

我在JS中尝试了什么

function finish(){
    var f = document.getElementById('wall');

    if (f>-1) {
        alert("Battle has been won, you now control the region!");
        var g = document.getElementById('regina').src = "img/us-profile";

    }


     else {
        alert("Battle has been lost!");


     }
}

Answer 1

如果您想查看wall是否超过-1，在您的情况下是1000，那么您需要从该元素获取值并将其转换为数字
像这样：

function finish(){
    var f = document.getElementById('wall').innerHTML;
    f = parseInt(f)

    if (f>-1) {
        alert("Battle has been won, you now control the region!");
        var g = document.getElementById('regina').src = "img/us-profile.src";
    }

     else {
        alert("Battle has been lost!");
     }
}

Answer 2

使用时

var f = document.getElementById('wall');

在f中，元素不是元素的值，请执行以下操作：使用.innerHTML获取值并将其转换为int，然后您可以检查if (f > -1)

var f = parseInt(document.getElementById('wall').innerHTML);

function finish() {
  var f = parseInt(document.getElementById('wall').innerHTML);
  if (f > -1) {
    alert("Battle has been won, you now control the region!");
    var g = document.getElementById('regina').src = "http://www.newseum.org/wp-content/uploads/2015/02/xwinner.jpg.pagespeed.ic.iQ7m1XtFLg.jpg";

  } else {
    alert("Battle has been lost!");


  }
}

finish();

<img class="owner" id="regina" src="img/uk-profile.jpg" alt="Great Britain">
<p class="fort"><b>Fort: </b><span id="wall">1000</span></p>

Answer 3

您是否正在尝试检查内部文字＆＃34; wall＆＃34;大于-1？如果是这样，这就是你应该检查innerHTML的方式：

if (f.innerHTML > -1)

如果您要检查墙是否存在，只需检查f是否返回true：

if(f)

src的更改工作，它总是转到其他地方。将代码更改为上述之一应该会有所帮助。

如果/ else，JS更改图像

3 个答案: