В чем проблема с этим базовым JavaScript?

#javascript #javascript-events

#javascript #dom-события

Вопрос:

Я пытаюсь написать базовый JavaScript, который изменяет фон абзаца на желтый, а затем на розовый по щелчку.

 <p id="foo">Hello, people!</p>

и сценарий:

 window.onload = function(){
var foo = document.getElementById("foo");
foo.onclick = function(){
        if(foo.style.background!=="yellow")foo.style.background = "yellow";
        if(foo.style.background === "yellow")  foo.style.background = "pink";
};
};

Цвет меняется на желтый при первом нажатии, но он не меняется на розовый при повторном нажатии. Я не могу понять проблему.

1. Какое это имеет отношение к jQuery?

2. Проще всего вставить оповещение (foo.style.background) или console.log(foo.style.background) в вашу функцию onclick, чтобы видеть, какое значение имеет каждый раз.

3. Внутренне браузер может использовать другое представление, чем строка «yellow» для обозначения фона. console.log(foo.style.background) чтобы увидеть, что это на самом деле.

4. @Том, @Майкл используют консоль. журнал вернул это: none repeat scroll 0% 0% yellow

5. находясь в консоли Chrome. журнал просто вернулся yellow Похоже, в этом и есть проблема.

Ответ №1:

РЕДАКТИРОВАТЬ: не используйте background , используйте backgroundColor

Исправленный пример

     if(foo.style.background!=="yellow")foo.style.background = "yellow";
    if(foo.style.background === "yellow")  foo.style.background = "pink";

должно быть:

     if(foo.style.background!=="yellow")foo.style.background = "yellow";
    else if(foo.style.background === "yellow")  foo.style.background = "pink";

потому что вы меняете его на желтый, затем проверяете, желтый ли он, и делаете его розовым

1. Что ж, вот еще одна причина использовать фигурные скобки, разрывы строк и отступы с блоками if / else.

2. Нет. Это не работает даже с ‘else’. Плюс даже без else он должен делать то же самое.

3. @Jatin: Нет, так не должно быть. Вам нужно добавить else и по-прежнему сохранять его там, если что.

4. @BoltClock Да, следовало использовать фигурные скобки и отступ, но, похоже, проблема не в этом.

5. Поскольку Firefox добавляет другие значения, none repeat scroll 0% 0% желтый

Ответ №2:

Попробуйте изменить

 if(foo.style.background === "yellow")

к этому

 if(foo.style.background == "yellow")

Ответ №3:

Это может быть связано с тем, как вы проводите сравнение:

foo.onclick = функция(){
 если(foo.style.background != "желтый") foo.style.background = "желтый";
 если(foo.style.background == "желтый") foo.style.background = "розовый"; 
};

Обратите внимание на использование «!=» и «==» вместо «!==» и «===».

Ответ №4:

Попробуйте:

 var foo = document.getElementById("foo");
foo.onclick = function(){
        if(foo.style.background!="yellow")foo.style.background = "yellow";
        else if(foo.style.background =="yellow")  foo.style.background = "pink";
};

http://jsfiddle.net/AvKPE/

 var foo = document.getElementById("foo");
foo.onclick = function(){
        if(foo.style.backgroundColor!="yellow")foo.style.backgroundColor = "yellow";
        else if(foo.style.backgroundColor =="yellow")  foo.style.backgroundColor = "pink";
};

http://jsfiddle.net/AvKPE/2/