Простой Javascript не могу понять, где это неправильно

-3

я не могу понять, где я пошло не так с этой простой JavaScriptПростой Javascript не могу понять, где это неправильно

<!DOCTYPE html> 
<html> 
<head> 
<title> </title> 
<script> 
    function changeColor() { 
     var elem = document.getElementById("para1"); 
     if (elem.style.color == black) { 
      elem.style.color = blue 
     } 
     else if (elem.style.color == blue) { 
      elem.style.color = red 
     } 
     else if (elem.style.color == red) { 
      elem.style.color = black 
     } 
    } 
    </script> 
</head> 

<body> 
    <p id="para1"> Some text here</p> 
    <button onclick='changeColor();'>Change!</button> 
    <!-- <button onclick='changeColor("red");'>red</button> --> 
</body> 
</html>

Осознайте отладки гораздо сложнее с JavaScript, чем VBA - что я использовал его ,

источник

2013-05-18 extensa5620

«черные» и другие литералы должны быть заключены в кавычки, т. Е. «Черный». –

Ohhhhh .............. У меня нет других слов. И голосуйте, чтобы закрыть. Как слишком локализован. Сожалею. – VisioN

Насколько сложнее отлаживать JavaScript? Это не может быть проще ... Chrome Developer Tools (доступно при нажатии F12) и FireBug делают в нем большой бит и позволяют использовать «console.log» в любом месте вашего кода, даже сбрасывая объекты и ошибки. Что вы можете хотеть больше? За исключением пошаговой отладки, конечно ... – Kiruse

Вам не хватает котировок вокруг ваших значений цвета.

elem.style.color = 'red';

источник

2013-05-18 23:36:34 Brad

Тем не менее, часто бывает, что строка, которую вы возвращаете из стиля.цвет "при сравнении не является" черным "или" красным ", а' "rgb (0, 0, 0)" или "rgb (255, 0, 0)" "(и это зависит от браузера в браузер). –

@ T.J.Crowder, Интересно ... Я предположил, что вы вернете все, что было ранее установлено. Хорошо знать! – Brad

-1

без кавычек они читаются как переменные, добавить кавычки для проверки этих строк, как

var elem = document.getElementById("para1"); 
    switch(elem.style.color){ 
     case 'black': 
       elem.style.color = 'blue' 
       break; 
     case 'blue': 
       elem.style.color = 'red'; 
       break; 
     case 'red': 
       elem.style.color = 'black'; 
       break; 
    }

источник

2013-05-18 23:37:40 Sam

Дело в том, что вы не обязательно возвращаетесь к тому, что вы установили. Вы можете установить «черный», но при чтении позже верните «rbg (0,0,0)» или аналогично. –

Эй, Сэм, я попробовал ваш код, но он не работал на моем браузере Firefox. – extensa5620

Есть две проблемы.

Первым из них является тот, который каждый указывал, вы должны использовать строки при присвоении значения цвета т.д .:

elem.style.color = "black";

Но второй более тонкий. Строка, которую вы возвращаете с elem.style.color, равна не достоверно "black" или "blue" и т. Д., Даже если это то, что вы назначили. Это может быть "rgb(0,0,0)" или аналогичный.

По этой причине, вы должны отслеживать «текущий» цвет отдельно, например:

function changeColor() { 
    var elem = document.getElementById("para1"); 
    var color = elem.getAttribute("data-color"); 
    if (!color || color == "black") { 
     color = elem.style.color = "blue"; 
    } 
    else if (color == "blue") { 
     color = elem.style.color = "red"; 
    } 
    else if (color == "red") { 
     color = elem.style.color = "black"; 
    } 
    elem.setAttribute("data-color", color); 
}

Там, я использовал data-* attribute отслеживать цвет я назначенный к элементу, в способ, который я знаю, не будет преобразован в значение RGB. (И я также использовал строки, а не имена переменных, для таких вещей, как "black" и "blue" и т. Д.)

источник

2013-05-18 23:47:45

И, наконец, один неопределенный «черный» убежал от вашего – VisioN

@VisioN: Doh! Благодарю. –

Спасибо TJ Crowder! Javascript имеет больше сложностей, чем VBA! Это очень хорошая информация! И я только что выбрал простой пример (подумал, что это просто) из Mozilla DN! – extensa5620

Простой Javascript не могу понять, где это неправильно

ответ

Смежные вопросы