Основной Javascript Вопрос

Question

Я возиться с книгой Head First Javascript. Поэтому мой вопрос: почему не вызывается предложение if в моей функции turnSad()? ОБНОВЛЕНИЕ Я пробовал это в Chrome и FF4. Кроме того, если я закомментирую оператор if, функция будет работать.

<script type="text/javascript">

    function turnSad() {
        if (document.getElementById("rockImg").src == "rock_happy.png")
            document.getElementById("rockImg").src = "rock.png";
    }

    function touchRock() {
        var userName = prompt("What is your name?", "Enter your name here");

        if (userName) {
            alert("It is nice to meet you " + userName + ".");
            document.getElementById("rockImg").src = "rock_happy.png";
        }
        setTimeout("turnSad();", 1000);
    }

</script>
<img id="rockImg" src="rock.png" alt="iRock"  style="cursor:pointer" 
    onclick="touchRock();" />

Answer 1

При доступе к свойству src (не к атрибуту) браузеры могут автоматически разрешать относительные пути и возвращать абсолютный путь, включая протокол, домен, порт и т. Д.

Чтобы получить или изменить атрибутзначение, используйте getAttribute и setAttribute.

image.getAttribute("src");

image.setAttribute("src", "someImage.png");

См. этот пример .

Answer 2

@ Ответ Анурага отличный, это лучшее, что вы можете сделать, getAttribute() поддерживается всеми браузерами (глючит в IE 5.5-7, но для получения src работает нормально).

Я просто хотел добавить несколько вещей:

• Не использовать строковый синтаксис setTimeout(), всегда передавать функцию (вы можете передать замыкание, чтобы запустить большечем одна функция), которая считается лучшей практикой.Вариация струн работает как eval(), широко известный злой ублюдок.Таким образом, ваш код должен выглядеть (то же самое относится и к setInterval):

  setTimeout(turnSad, 1000);
  

• Кроме использования getAttribute(), который является наилучшим подходом, вы также можете написать метод регулярных выражений,Я добавляю это только для удовольствия и для расширения представления, пожалуйста, используйте решение @ Anurag.

  if (document.getElementById("rockImg").src.match(/(^|\/)rock_happy\.png$/i)) {
      document.getElementById("rockImg").src = "rock.png";
  }
  

  Это попытается сопоставить без учета регистра, ища rock_happy.png в конце строки,с началом строки или / перед ней.

  jsFiddle Demo

Answer 3

Какой браузер вы используете?IE может превратить имя файла в верхний регистр («ROCK_HAPPY.PNG»).Используйте инструменты разработчика (нажмите кнопку «Обновить» на панели инструментов), чтобы определить реальный атрибут «src», или просто выполните команду alert(document.getElementById().src)