更新功能（和开关）中的img

Om尝试使用onclick函数更新img（损坏）。更新功能（和开关）中的img

<img id="damage" src="100.png"> 
<img id="healing" onclick="heal()" src="healing.png">

IMG（损坏）从与开关（prosent）中，当位点被打开的变量的变化。

当我点击img（愈合）我想变量（prosent）改变，所以img（伤害）改变。

var liv = document.getElementById('damage'); 
var prosent = 0; 
function heal() { 
     prosent += 10; 
} 

switch (prosent){ 
      case 100: 
       liv.src = "100.png"; 
       break; 
      case 99: 
       liv.src = "99.png"; 
       break; 

       all the way down to 0.. 
}

...

所以，我怎样才能使它更新？
谢谢:)

来源

2017-03-02 Steinar Hageberg Sundby

只要把开关函数里面并调用它从医治（）

var liv = document.getElementById('damage'); 
var prosent = 0; 
function heal() { 
     prosent += 10; 
     update(); 
} 

function update() { 
    switch (prosent){ 
      case 100: 
       liv.src = "100.png"; 
       break; 
      case 99: 
       liv.src = "99.png"; 
       break; 

       all the way down to 0.. 
    } 
}

但它会更好，如果你写你这样的更新功能：

function update() { 
    liv.src = prosent + ".png"; 
}

甚至更好：

var liv = document.getElementById('damage'); 
var prosent = 0; 
function heal() { 
     prosent += 10; 
     liv.src = prosent + '.png'; 
}

容易吧？

来源

2017-03-02 17:05:44

谢谢！我现在觉得很蠢，用101个开关切换.. :) –

没有人是愚蠢的。我们所有人都只是在学习。 :)虽然有一些极端的情况。：D但那不是你的情况:) –

您忘记将switch声明放入您的heal()方法中，但您可以完全放弃它，并使用字符串连接来动态更新图像src。

（我加了几条语句更新alt文本图像的为好，因为这是良好的可达性做法，它使演示更容易理解。）

var liv = document.getElementById('damage'); 
 
var prosent = +liv.alt; 
 

 
function heal() { 
 
    prosent += 10; 
 
    liv.src = (liv.alt = prosent) + '.png'; 
 
}

<img id="damage" src="100.png" alt="100"> 
 
<img id="healing" onclick="heal()" src="healing.png">

来源

2017-03-02 17:07:17 gyre

如果我们向用户解释'var prosent = + liv.alt;'中的+运算符是将字符串值转换为数字的javascript“技巧”，那么可能会更好。并且'（liv.alt = prosent）'将prosev的值设置为liv.alt属性，然后连接到'.png'，然后将其分配给liv.src。 –

你可以这样做：

<img id="damage" src="100.png"> 
<img id="healing" onclick="heal()" src="healing.png"> 


    var liv = document.getElementById('damage'); 
    var prosent = 0; 
    heal = function() { 
     prosent += 10; 
     if (prosent > 0) { 
     liv.src = prosent + ".png"; 
    }

请注意，我在全球范围内提供了愈合功能范围，因为我不确定你的JavaScript范围的位置。无论如何，我的例子的作品。

来源

2017-03-02 17:10:36

更新功能（和开关）中的img

回答

相关问题