Как добавить изображение в элемент div с помощью оператора switch?

Question

Идея состоит в том, что каждый раз, когда жизнь уменьшается на 1, изображение будет показываться на одно меньше или позже в элементе div.Код не закончен, остальные я добавлю позже (5-1), но я хочу посмотреть, возможно ли это в первую очередь так, как я это делаю.Надеюсь, того, что я показываю, достаточно, чтобы увидеть, что я пытаюсь сделать.

function lifeloss() {
  life -= 1;
  var life = document.getElementById("lifecount");
  switch (life) {
    case 1:
      if (life >= 5) {
        life.innerHTML += "<img class="life" src="life.png">"
      }
      break;
    default:

  }
}

Answer 1

С предоставленным вами кодом оператор if никогда не будет прочитан, потому что вы проверили случай, когда life был равен 1, и в соответствии с этим оператором вы также проверили, был ли life больше 5. В основном, когда life = 1, вы хотите проверить, если это также> = 5.

Answer 2

switch заявления для конкретных значений.Поскольку вы ищете диапазон (то есть. life >= 5), вы должны согласиться с утверждениями if / else:

function lifeloss() {
  life -= 1;
  var lifecount = document.getElementById("lifecount");

  if (life >= 5) {
    lifecount.innerHTML += '<img class="life" src="life.png" />';
  } else if (life >= 1) {
    //Perhaps a low life image?
  } else {
    //We're dead Jim
  }
}

После повторного чтения вопроса, если вы хотите скопировать изображениежизни для каждой жизни, я рекомендую использовать string.repeat():

function lifeloss() {
  life -= 1;
  var lifecount = document.getElementById("lifecount");

  var lifeImg = '<img class="life" src="life.png" />';

  lifecount.innerHTML = lifeImg.repeat(life);
}