我怎样才能使用条件语句来切换我标题的颜色？

Question

Button should toggle from original(black) to yellow and revert back. My issue is reverting it back. In the if-else statement only the else statement works. I have tried switch statement but that does not work html

 var buttonElement = document.getElementById("title-button"); var elementbutton = buttonElement; var elementsArray = document.getElementsByTagName("h1"); var element = elementsArray[0]; elementbutton.addEventListener( "click", function(){ if(elementbutton.hasOwnProperty("yellow")){ element.remove("yellow"); element.classList.remove("bordered-text"); element.style.add = "black"; } else { element.style.color = "yellow"; element.classList.add("bordered-text"); } }); 

 .bordered-text{ border-style: solid; border-color: black; } 

 <button id="title-button">Alters title</button> <h1>Header 1</h1> 

Answer 1

The button you are clicking does not have any property named yellow , thus elementbutton.hasOwnProperty("yellow") always evaluates to false , hence the else block is always executing.

Instead of checking the hasOwnProperty of the clicked button, you should check element.style.color of h1 :

 var buttonElement = document.getElementById("title-button"); var elementbutton = buttonElement; var elementsArray = document.getElementsByTagName("h1"); var element = elementsArray[0]; elementbutton.addEventListener( "click", function(){ if(element.style.color == "yellow"){ element.style.color = "black"; element.classList.remove("bordered-text"); } else { element.style.color = "yellow"; element.classList.add("bordered-text"); } }); 

 .bordered-text{ border-style: solid; border-color: black; } 

 <button id="title-button">Alters title</button> <h1>Header 1</h1>