Changing Text background highlighter

So I'm trying to get the background colour of each line of my id="highlighter2" to have a yellow background when clicked so it looks something similar to this enter image description here

and when it is clicked, the button is replaced with "Unhighlight them all" button which unhighlights everything. I tried to define the onclick with the id but instead changes the background instead, what's the right way to do/approach this?

Code:

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 -->

Answers:

Answer

Paragraphs: the P element

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

So, use some other element to wrap all the p element like div.

You can change the background color and text based on the text of the button.

To set the backgroundColor of all p element individually you have to target all the elements first. You can do that by using querySelectorAll(). Then use forEach() on the NodeList like the following way:

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

document.body.style.backgroundColor will apply your style to the body. Try this document.getElementById("highlighter2").style.backgroundColor

Or document.p.style.backgroundColor

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.