Как настроить таргетинг и изменить все теги h2 в моем HTML-документе с помощью JavaScript - PullRequest
Новая
       8

Как настроить таргетинг и изменить все теги h2 в моем HTML-документе с помощью JavaScript

0 голосов
/ 09 февраля 2019

У меня есть HTML-документ с разными заголовками в h1 или h2.Заголовки h2 имеют класс 'subHeadline'.Я хочу, чтобы все теги h2 стали белыми, когда я нажимаю на них.

В моем коде JavaScript ниже вы можете видеть, что я пытался настроить таргетинг на все элементы в документе HTML с помощью класса 'subHeadline'.Тем не менее, только первый тег h2 становится белым, когда я нажимаю на него.Как сделать так, чтобы все заголовки h2 стали белыми при нажатии?Вот мой код: 

<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>
<script>

let headline = document.querySelector('h1');
headline.addEventListener('click', changeHeader);

function changeHeader() {
  headline.style.color = 'white';
}

let subHead = document.querySelector('.subHeadline');
subHead.addEventListener('click', changeSubheader);

function changeSubheader() {
  subHead.style.color = 'white';
}

Ответы [ 3 ]

0 голосов
/ 09 февраля 2019

document.querySelector находит только первый соответствующий элемент в документе - вот почему ваши слушатели событий работали только с первыми элементами.Чтобы исправить это, используйте вместо этого querySelectorAll и выполните итерацию в полученной коллекции, чтобы добавить слушателей по отдельности.

Обратите внимание, что мне пришлось изменить прослушиватели событий, чтобы они влияли только на элемент, на который нажали.Они принимают сам объект события в качестве аргумента (который я здесь назвал e, что является общим соглашением), а затем e.target - это фактический элемент, по которому щелкнули. 

let headlines = document.querySelectorAll('h1');
headlines.forEach(headline => headline.addEventListener('click', changeHeader));

function changeHeader(e) {
  e.target.style.color = 'white';
}

let subHeaders = document.querySelectorAll('.subHeadline');
subHeaders.forEach(subhead => subhead.addEventListener('click', changeSubheader));

function changeSubheader(e) {
  e.target.style.color = 'white';
}
<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>
0 голосов
/ 09 февраля 2019

используйте событие onclick для тегов, передайте сам элемент функции и сделайте их белыми 

function a(e) {
  e.style.color = 'white';
}
<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline" onclick="a(this)"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"  onclick="a(this)"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline" onclick="a(this)"> The third h2</h2>
<p> Random paragraph text. </p>
0 голосов
/ 09 февраля 2019

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

Для этого вы можете использовать querySelectorAll и forEach.См. Документацию для querySelectorAll и forEach .

Как предложено @Andreas ниже, вы можете использовать один querySelectorAll как для заголовков, так и для вспомогательных заголовков: 

document.querySelectorAll('h1, .subHeadline');

Вам нужно будет внести небольшие изменения в свою функцию, чтобы принять событие click в качестве аргумента.Это событие как target свойство, которое будет заголовком, на который вы нажали. 

function changeColor(event) {
  event.target.style.color = 'white';
}

document.querySelectorAll('h1, .subHeadline')
  .forEach(el => el.addEventListener('click', changeColor));
<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>
...