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

Question

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

1

Идея состоит в том, что каждый раз, когда жизнь опускается на 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:

  }
}

kritoz 18 окт. 2018, в 13:27

Источник

2

Я не понимаю, как жизнь может быть> = 5 в случае, когда жизнь = 1.
Alix Bergeret 18 окт. 2018, в 10:32
0

@AlixBergeret Это как когда ты говоришь, что тебе 20 лет, а на самом деле 25.
Mark Baijens 18 окт. 2018, в 10:35
0

@AlixBergeret у меня var life = 5 вне функции, но это может быть неправильно с моей стороны
kritoz 18 окт. 2018, в 10:50

Показать ещё 1 комментарий

Теги:

javascript

switch-statement

function

2 ответа

0

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

Saba Turdzeladze 18 окт. 2018, в 08:06

Ещё вопросы

Я не понимаю, как жизнь может быть> = 5 в случае, когда жизнь = 1.
@AlixBergeret Это как когда ты говоришь, что тебе 20 лет, а на самом деле 25.
@AlixBergeret у меня var life = 5 вне функции, но это может быть неправильно с моей стороны

FrankerZ · Accepted Answer · 2018-10-18T09-08-00.000Z

операторы 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
  }
}

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

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

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

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

Я использовал string.repeat (), и теперь я не получаю никакой ошибки консоли, но изображения не отображаются. Может быть что-то в остальной части кода, или, может быть, я хочу иметь переменную life life = 5 в функции?
Проверьте свой элемент lifecount в инспекторе элементов. Правильно ли установлен .innerHTML ? Существует ли life.png ?
life.png существует. Не знаю, что вы имеете в виду, что .innerHTML устанавливается правильно, у меня есть div с id = "lifecount", так что я так полагаю?
Где у вас установлена переменная lifecount ? Вы можете отобразить этот код?
Хорошо, мне нужна переменная lifecount ... упс. Прости за это