Как я могу использовать условные операторы для переключения цветов моего заголовка?

Кнопка должна переключаться с исходного (черного) на желтый и возвращаться обратно. Моя проблема заключается в том, чтобы вернуть его обратно. В операторе if-else работает только оператор else. Я пробовал оператор switch, но это не работает 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>

Здравствуйте и добро пожаловать в StackOverflow. Пожалуйста, найдите время, чтобы прочитать страницу справки, особенно разделы «На какие темы я могу здесь спросить?» и «Каких вопросов мне следует избегать?». И что еще более важно, пожалуйста, прочитайте контрольный список вопросов о переполнении стека. Вы также можете узнать о Минимальные, полные и проверяемые примеры.

— 10.04.2019 06:49

javascript html css

10.04.2019 06:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кнопка, которую вы нажимаете, не имеет свойства с именем желтый, поэтому elementbutton.hasOwnProperty("yellow") всегда оценивается как false, поэтому блок еще всегда выполняется.

Вместо того, чтобы проверять hasOwnProperty нажатой кнопки, вы должны проверить element.style.color из 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>

10.04.2019 06:52

Другие вопросы по теме

Можем ли мы удалить все внутренние интервалы из div?

Как сделать левую и правую диагональ в виде поперечной линии в ячейке таблицы?

Как я могу ограничить ввод в HTML type="number"

Как сделать элементы flexbox одинаковой высоты и/или начинать с одной и той же точки

CSS ведет себя очень странно, особенно с интервалами

Есть ли способ сделать функцию Regex для проверки имени и фамилии?

Когда я отправляю форму в html, она отправляется в процессор php, за исключением того, что мой браузер говорит об ошибке 500

Как поместить значение PHP в текстовую область HTML

Используйте автовоспроизведение для воспроизведения радиостанции с помощью аудио HTML5

Карусельные элементы управления Bootstrap не работают с node.js

Как я могу использовать условные операторы для переключения цветов моего заголовка?

Ответы 1

Другие вопросы по теме

Похожие вопросы