функция, которая должна быть интерактивной, но она работает только один раз

Question

Я начну с кода, затем объясню:

Код javascript находится во внешнем файле, поэтому не беспокойтесь, я вставил его таким образом, чтобы вы могли прочитать Это. У меня есть три изображения, они представляют собой три луковицы. Когда я нажимаю на bulb1 все хорошо, это продолжается. Теперь я ожидаю, что если я снова нажму на лампочку 1, она выключится, но ничего не произойдет, почему? Извините, я новичок и делаю упражнения для улучшения. Большое спасибо!

Answer 1

Если вы запустите этот скрипт - либо локально, либо с веб-сервера - строка, возвращаемая путем запроса свойства .sr c элемента изображения, не состоит из пути и изображения только.

Например, если вы запустите его локально в папке с именем лампочки на вашем диске d:, он вернет

file:///d:/bulb/images/lightoff.png

Это означает, что, как только будет вызвана функция luce, она перескочит прямо в блок else, потому что if(bulbsw.src == "images/lighton.png") оценивается как false. В следующий раз, когда вы нажмете на ту же лампочку, она снова перейдет прямо в блок else, потому что нет способа, которым это когда-либо будет оценено как true.

Вы можете обойти это путем извлечения только имени файла + расширения и использовать это для сравнения.

function luce(bulb) {
  if (bulb == "bulb1") {
    var bulbsw = document.getElementById('bulb1');
    var bulbImage = bulbsw.src.substring(bulbsw.src.lastIndexOf("/") + 1, bulbsw.src.length);
    if (bulbImage == "lighton.png") {
      bulbsw.src = "lightoff.png";
    } else {
      bulbsw.src = "lighton.png";
    }
  }
}