невозможно изменить цвет текста при нажатии кнопки - PullRequest
Новая
       0

невозможно изменить цвет текста при нажатии кнопки

0 голосов
/ 25 мая 2020

при нажатии кнопки абзацы не окрашиваются, я не могу понять причину этого. 

<button onclick="changeBackGroundOfPs('#firstDiv');">Change backgrounds of p under a given element known by id</button>
  <br>
<div id="firstDiv">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

function changeBackGroundOfPs(id ) {
  var paragraphs = document.querySelectorAll(id   p);

  // Another way to iterate on all elements in a collection
 for (var i = 0; i < paragraphs.length; i++ ) {
   paragraphs[i].style.backgroundColor = "lightGreen";
  }
}

почему это работает без добавления точек с запятой в селекторе запросов (document. querySelectorAll ("#" + id + "p"));. 

<button onclick="changeBackGroundOfPs('firstDiv');">Change backgrounds of p under a given element known by id</button>
  <br>
<div id="firstDiv">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

function changeBackGroundOfPs(id) {
  var paragraphs = document.querySelectorAll("#" + id + " p");

  // Another way to iterate on all elements in a collection
  for (var i = 0; i < paragraphs.length; i++ ) {
    paragraphs[i].style.backgroundColor = "lightGreen";
  }
}

1 Ответ

1 голос
/ 25 мая 2020

Проблема в вашем querySelector Вот правильный код 

var paragraphs = document.querySelectorAll(`${id} p`);

Вот рабочий код. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button onclick="changeBackGroundOfPs('#firstDiv');">Change backgrounds of p under a given element known by id</button>
  <br>
<div id="firstDiv">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>
  
  
  <script>
    console.clear();

    function changeBackGroundOfPs(id ) {

      var paragraphs = document.querySelectorAll(`${id} p`);

      // Another way to iterate on all elements in a collection
      for (var i = 0; i < paragraphs.length; i++ ) {
        paragraphs[i].style.backgroundColor = "lightGreen";
      }
    }
    
  
  </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...