関数（およびスイッチ）内のimgを更新する

Question

onclick関数でimg（破損）を更新しようとしています。

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

サイトが開かれたときに、スイッチ付きの変数からimg（破損）が変更されます。

私はimg（癒し）をクリックすると、（派生した）変数を変更したいので、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.. 
} 

...

だから、どのように私はそれを更新することができますか？
感謝:)

Answer 1

ただ、関数の内部スイッチを入れて、（ヒールからそれを呼び出す）

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'; 
} 

より簡単？

Answer 2

heal()メソッドの中にswitchステートメントを入れるのを忘れてしまったのですが、完全に無視して文字列連結を使用して、画像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">

Answer 3

あなたはこれを行うことができます：

<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スコープがどこにあるのか分からないからです。とにかく、私の例が動作します。