Задать вопрос
@rustam6548
javascript

Не получается изменить цвет через js, как исправить?

let toggleButton = document.getElementById("togbut");
let s1 = document.getElementById("s1").style.backgroundColor;
let s2 = document.getElementById("s2").style.backgroundColor;
let s3 = document.getElementById("s3").style.backgroundColor;

function changeColor() {
  s1 = "white";
  s2 = "white";
  s3 = "white";
}

toggleButton.onmouseover = changeColor;


<body>
    <div>
      <div class="toggle-button" id="togbut">
        <span id="s1"></span>
        <span id="s2"></span>
        <span id="s3"></span>
      </div>
      <ul class="sidebar">
        <li>Menu</li>
        <li><a href="/">Main</li>
        <li><a href="/">About us</li>
      </ul>
    </div>
    <script src="scripts/menu.js"></script>
</body>
  • Вопрос задан
  • 63 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
в переменных s1-2-3 оказывается лишь текущее значение цвета.
Если его поменять в переменных, оно не изменится в элементах.

Ну и в целом задача, наверное, лучше решается просто стилями и псевдоклассом :hover
Ответ написан
2 комментария
2 комментария
@berdyevX
1) Находим DOM-элементы (для объявления лучше использовать const):
const toggleButton = document.getElementById("togbut");
const s1 = document.getElementById("s1");
const s2 = document.getElementById("s2");
const s3 = document.getElementById("s3");

2) Создаём функцию для изменения background у элементов (использую ES6 синтаксис):
const changeColor = () => {
s1.style.backgroundColor = 'white';
s2.style.backgroundColor = 'white';
s3.style.backgroundColor = 'white';
};

3) Создаём обработчик событий при наведении и передаём туда нашу функцию:
toggleButton.addEventListener('mouseover', changeColor);

Код писал на телефоне, мог не заметить ошибки, также это мой первый ответ на хабре, если что-то не так, извиняюсь :)
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо доработать несколько задач
23 нояб. 2024, в 07:32
75000 руб./за проект
Сделать бэкап сайта(форума) и установить его на сервер
23 нояб. 2024, в 04:31
2000 руб./за проект
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Ещё заказы