My Javascript не меняет свойство className

Question

Вот основная часть моего кода, пытающегося переключить класс на тег p (info) при нажатии на мою кнопку (btn). Я не уверен, что я делаю неправильно. Я никогда раньше не использовал свойство className, поэтому не уверен, что я пропущу что-то простое, или если в моей логике есть фундаментальная ошибка, пытающаяся это сделать.

var handler = function(event){ 
    if(info.className === 'on'){ 
    info.className='off'; 
    }else{ 
    info.className='on'; 
    } 
}; 

btn.addEventListener('click', handler); 

Answer 1

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

var btn = document.getElementById("btn"), 
 
    info = document.getElementById("info"); 
 

 
var handler = function (event) { 
 
    if (info.className === 'on') { 
 
     info.className = 'off'; 
 
    } else { 
 
     info.className = 'on'; 
 
    } 
 
}; 
 

 
btn.addEventListener('click', handler);

.on { 
 
    background-color: red; 
 
} 
 
.off { 
 
    background-color: green; 
 
}

<button id=btn>Button</button> 
 
<p id=info>Info</p>

Answer 2

Что такое информация - это идентификатор? если да, и если вы используете простой javascript, тогда назовите его как document.getElementById ('info'), или если jquery затем $ ('# info').

Однако он также звучит как все элементы name и classnames (информация, вкл., Выкл.), Отображаемые как встроенные ключевые слова. Лучше измените их имена и попробуйте снова что-то вроде infoElem, onClass, offClass, и эти классы должны быть переименованы снова аналогично в вашей таблице стилей.