Изменение подсветки фона текста

Question

Поэтому я пытаюсь получить цвет фона каждой строки моего id="highlighter2", чтобы при нажатии на него был выделен желтый фон, чтобы он выглядел примерно так:

и когда она нажата, кнопка заменяется на кнопку «Выделить их все» , которая ничего не выделяет. Я попытался определить onclick с идентификатором, но вместо этого изменил фон, как это сделать?

Код:

function Highlighter() {
  var p = document.getElementById("poem"); // get the paragraph
  var p = document.getElementById("highlighter2");
  document.body.style.backgroundColor = "yellow";
}

#poem {
  padding: 10px;
  margin-bottom: 10px;
  color: blue;
  font-size: 1.25em;
  font-family: sans-serif;
  background-color: silver;
  border: 1px dashed black;
  width: 70%;
}

<div id="poem">
  <h2> How Many, How Much </h2>
  <h4> by Shel Silverstein </h4>

  <p id="highlighter2">
    <p> How many slams in an old screen door? </p>
    <p> Depends how loud you shut it.</p>
    <p> How many slices in a bread?</p>
    <p> Depends how thin you cut it.</p>
    <p> How much good inside a day? </p>
    <p> Depends how good you live 'em. </p>
    <p> How much love inside a friend? </p>
    <p> Depends how much you give 'em. </p>
  </p>


</div>

<button type="button" onclick="Highlighter()">Click to highlight</button>
<!-- Highlight -->

Answer 1

Абзацы: элемент P

Элемент P представляет абзац.Он не может содержать элементы уровня блока (включая сам P).

Итак, используйте другой элемент, чтобы обернуть все элементы p, например div.

. Вы можете изменитьцвет фона и текста на основе текста кнопки.

Чтобы установить backgroundColor всех элементов p по отдельности, сначала вы должны нацелить все элементы.Вы можете сделать это, используя querySelectorAll().Затем используйте forEach() в NodeList следующим образом:

function Highlighter(btn) {
  var p = document.querySelectorAll('#highlighter2 > p'); // get the paragraph
  if(btn.textContent == 'Click to highlight'){
    p.forEach(function(pEl){
      pEl.style.backgroundColor = "yellow";
    }); 
    btn.textContent = 'Unhighlight them all';
  }
  else{
    p.forEach(function(pEl){
      pEl.style.backgroundColor = "";
    });
    btn.textContent = 'Click to highlight';
  }
}

#poem {
  padding: 10px;
  margin-bottom: 10px;
  color: blue;
  font-size: 1.25em;
  font-family: sans-serif;
  background-color: silver;
  border: 1px dashed black;
  width: 70%;
}

<div id="poem">
  <h2> How Many, How Much  </h2>
  <h4> by Shel Silverstein </h4>

  <div id="highlighter2">
    <p> How many slams in an old screen door? </p>
    <p> Depends how loud you shut it.</p>
    <p> How many slices in a bread?</p>
    <p> Depends how thin you cut it.</p>
    <p> How much good inside a day? </p>
    <p> Depends how good you live 'em. </p>
    <p> How much love inside a friend? </p>
    <p> Depends how much you give 'em. </p>
  </div>


</div>

<button type="button" onclick="Highlighter(this)">Click to highlight</button><!-- Highlight -->

Answer 2

document.body.style.backgroundColor применит ваш стиль к телу. Попробуйте это document.getElementById("highlighter2").style.backgroundColor

Или document.p.style.backgroundColor