Проблема с Javascript: как изменить произвольный цвет заголовка из массива цветов при наведении курсора на элемент div?

Я работаю над школьным проектом и наткнулся на эту небольшую проблему:

При наведении курсора на элемент div (с классом .projects) я хочу, чтобы заголовок (h1) tot изменился на один из трех цветов из массива, выбранного случайным образом.

Some title

<div class="project"></div>



var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
var randomColor = colors[Math.floor(Math.random()*colors.length)];


document.querySelector(".project").addEventListener("mouseover", function(){
  var title = document.getElementsByTagName("h1");
  title.style.color = randomColor;
});

My code in codepen: https://codepen.io/BoLeynen/pen/XogLPy?editors=1010

Заранее спасибо!

0
Вы не объяснили, в чем проблема.
добавлено автор David Thomas, источник
Вы не объяснили, в чем проблема.
добавлено автор David Thomas, источник

8 ответы

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

Предполагая, что вы хотите менять цвет при каждом наведении указателя мыши на соответствующий раздел, вам нужно будет сделать Math.random внутри обработчиком события для события mouseover. В противном случае он будет вычислен один раз, когда сценарий сначала оценивает, а затем никогда не изменяется.

Идея о том, что вы могли бы заставить все h1 s менять цвет (в противном случае getElementsByTagName кажется странным включением, поскольку вы уже продемонстрировали querySelector ) Я только что добавил forEach со случайным цветом, определяемым для каждого тега h1 .

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];

document.querySelector(".project").addEventListener("mouseover", function(){
  var titles = Array.from(document.getElementsByTagName("h1"));
  titles.forEach(function(title){
    var randomColor = colors[Math.floor(Math.random()*colors.length)];
    title.style.color = randomColor;
  });
});
.project{
  width: 200px;
  height: 200px;
  background-color: pink;
}

Some title

<!--This should change color,,-->

<div class="project"></div>
<!--when hovering over this div. -->
</div> </div>

0
добавлено

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

Предполагая, что вы хотите менять цвет при каждом наведении указателя мыши на соответствующий раздел, вам нужно будет сделать Math.random внутри обработчиком события для события mouseover. В противном случае он будет вычислен один раз, когда сценарий сначала оценивает, а затем никогда не изменяется.

Идея о том, что вы могли бы заставить все h1 s менять цвет (в противном случае getElementsByTagName кажется странным включением, поскольку вы уже продемонстрировали querySelector ) Я только что добавил forEach со случайным цветом, определяемым для каждого тега h1 .

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];

document.querySelector(".project").addEventListener("mouseover", function(){
  var titles = Array.from(document.getElementsByTagName("h1"));
  titles.forEach(function(title){
    var randomColor = colors[Math.floor(Math.random()*colors.length)];
    title.style.color = randomColor;
  });
});
.project{
  width: 200px;
  height: 200px;
  background-color: pink;
}

Some title

<!--This should change color,,-->

<div class="project"></div>
<!--when hovering over this div. -->
</div> </div>

0
добавлено

Since div is empty so not sure where to hover. Secondly getElementsByTagName return a list so you need to get the element by passing the index & then get the randomColor inside the mouseover callback

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
document.querySelector(".project").addEventListener("mouseover", function() {
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});

Some title

<div class="project">hover here</div>
</div> </div>

0
добавлено

Since div is empty so not sure where to hover. Secondly getElementsByTagName return a list so you need to get the element by passing the index & then get the randomColor inside the mouseover callback

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
document.querySelector(".project").addEventListener("mouseover", function() {
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});

Some title

<div class="project">hover here</div>
</div> </div>

0
добавлено

document.getElementsByTagName returns an array; i.e. it returns all elements with that tagname (the name hints this by using the plural Elements). Since you want to change the style property of just one element (i.e. the first one), the easiest thing to do is to add [0] when assigning the title variable.

Обратите внимание, что это просто изменит цвет один раз на предварительно выбранный цвет из списка; Мне неясно, является ли это желаемым поведением или вы хотите менять его каждый раз, когда мышь наводится.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
var randomColor = colors[Math.floor(Math.random()*colors.length)];

document.querySelector(".project").addEventListener("mouseover", function(){
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});
.project{background:red;height:100px;width:100px}

Some title

<div class="project"></div>
</div> </div>

0
добавлено

document.getElementsByTagName returns an array; i.e. it returns all elements with that tagname (the name hints this by using the plural Elements). Since you want to change the style property of just one element (i.e. the first one), the easiest thing to do is to add [0] when assigning the title variable.

Обратите внимание, что это просто изменит цвет один раз на предварительно выбранный цвет из списка; Мне неясно, является ли это желаемым поведением или вы хотите менять его каждый раз, когда мышь наводится.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
var randomColor = colors[Math.floor(Math.random()*colors.length)];

document.querySelector(".project").addEventListener("mouseover", function(){
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});
.project{background:red;height:100px;width:100px}

Some title

<div class="project"></div>
</div> </div>

0
добавлено

Просто замените код document.getElementsByTagName ("h1") на document.getElementsByTagName ("h1") [0] .

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

0
добавлено

Просто замените код document.getElementsByTagName ("h1") на document.getElementsByTagName ("h1") [0] .

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

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)