更新功能（和開關）中的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

回答

相關問題