Не работает функция по событию(клик)

Question

Не работает функция по событию(клик)

Рейтинг: 0Ответов: 3Опубликовано: 19.02.2023

Друзья, всем привет, подскажите пожалуйста, что не так в моём коде, почему он не работает? Скрипт подключен, тест вывода на экран работает, а по клику цвет параграфов не меняется на указанный(красный).

let p = document.querySelectorAll('p');

function setRed() {
  this.style.color = 'red';
}

for (let key of p) {
  key.onclick = setRed;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>HTML&CSS - Изучение</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js"></script>
</head>

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, libero vitae non ipsam, velit nesciunt quia aliquid, ullam cum atque quibusdam dolor exercitationem nemo recusandae rerum officia magni officiis aliquam praesentium neque modi eos optio
    deserunt eum? Natus numquam dolores aliquid. Harum laudantium consequuntur asperiores nostrum, dolore cumque eveniet consectetur.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum cum quas quos corrupti rerum ex laboriosam atque? Numquam quia mollitia vitae pariatur ab, quas et laudantium nulla cum? Ratione aliquid atque tempore, saepe optio commodi possimus
    distinctio illo nesciunt nihil molestias soluta quidem nam ut exercitationem at? Perferendis, rerum.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quos saepe, dolor nobis magnam officia illum quis similique, voluptas repellendus nihil, vitae non rerum. Earum accusantium libero cupiditate explicabo, aliquid laboriosam. Maiores aspernatur
    inventore magni, ex quam laboriosam ipsa unde nisi fuga et accusantium nesciunt. Ducimus sunt pariatur nisi doloribus?</p>
</body>

</html>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0

при тесте вашего кода, у меня не возникло ошибок, но возникла мысль, что вы просто забыли поставить теги скрипта поэтому вот решение, которое у меня работает локально

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>HTML&CSS - Изучение</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js"></script>
</head>

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, libero vitae non ipsam, velit nesciunt quia aliquid, ullam cum atque quibusdam dolor exercitationem nemo recusandae rerum officia magni officiis aliquam praesentium neque modi eos optio
    deserunt eum? Natus numquam dolores aliquid. Harum laudantium consequuntur asperiores nostrum, dolore cumque eveniet consectetur.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum cum quas quos corrupti rerum ex laboriosam atque? Numquam quia mollitia vitae pariatur ab, quas et laudantium nulla cum? Ratione aliquid atque tempore, saepe optio commodi possimus
    distinctio illo nesciunt nihil molestias soluta quidem nam ut exercitationem at? Perferendis, rerum.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quos saepe, dolor nobis magnam officia illum quis similique, voluptas repellendus nihil, vitae non rerum. Earum accusantium libero cupiditate explicabo, aliquid laboriosam. Maiores aspernatur
    inventore magni, ex quam laboriosam ipsa unde nisi fuga et accusantium nesciunt. Ducimus sunt pariatur nisi doloribus?</p>
</body>

</html>
<script>
  let p = document.querySelectorAll('p');

  function setRed() {
    this.style.color = 'red';
  }

  for (let key of p) {
    key.onclick = setRed;
  }
</script>

Answer 2

▲ 0

Попробуйте вот так:

function colorRed() {
  let p = document.querySelectorAll('p');

  function setRed() {
    this.style.color = 'red';
  }

  for (let key of p) {
    key.onclick = setRed;
  }
}

window.addEventListener('DOMContentLoaded', colorRed);

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, libero vitae non ipsam, velit nesciunt quia aliquid, ullam cum atque quibusdam dolor exercitationem nemo recusandae rerum officia magni officiis aliquam praesentium neque modi eos optio
  deserunt eum? Natus numquam dolores aliquid. Harum laudantium consequuntur asperiores nostrum, dolore cumque eveniet consectetur.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum cum quas quos corrupti rerum ex laboriosam atque? Numquam quia mollitia vitae pariatur ab, quas et laudantium nulla cum? Ratione aliquid atque tempore, saepe optio commodi possimus
  distinctio illo nesciunt nihil molestias soluta quidem nam ut exercitationem at? Perferendis, rerum.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quos saepe, dolor nobis magnam officia illum quis similique, voluptas repellendus nihil, vitae non rerum. Earum accusantium libero cupiditate explicabo, aliquid laboriosam. Maiores aspernatur
  inventore magni, ex quam laboriosam ipsa unde nisi fuga et accusantium nesciunt. Ducimus sunt pariatur nisi doloribus?</p>

Answer 3

▲ -1

Проблему решил, оказывается скрипт нужно подключать после body, скрипт заработал

Не работает функция по событию(клик)

Ответы