Javascript button toggle

Question

I am trying to write a javascript function so that when a button is clicked, all HTML paragraph elements "p" will be highlighted yellow, the HTML buttons text will then change to "Click to unhighlight" (the code below before the else statement is fully functional, all paragraphs are highlighted and the buttons text changes). I am trying to reload the page using "location.reload();" but it doesn't seem to work.

window.onload = function() {
  var button = document.getElementsByTagName("button");
  button[0].onclick = changeBackground;
}

function changeBackground() {
  var myParas = document.getElementsByTagName("p");

  for (var i = 0; i < myParas.length; i++) {
    myParas[i].style.backgroundColor = "yellow";
  }
  var firstClick = true;
  var b = document.getElementById("button");

  if (firstClick) {
    b.innerHTML = "Click to unhighlight";
    firstClick = false;
  } else {
    location.reload();
    firstClick = true;
  }
}

Any advice on how to properly call the "location.reload();" function would be much appreciated. Thanks in advance.

and location.reload(); firstClick = true; would make no sense - once you've triggered the reload, any code you write after that is pointless because you've just told the browser to destroy the page and re-create it from scratch. But you don't need a reload for this, anyway — ADyson
– ADyson, Commented Oct 29, 2018 at 21:46
Why do you want to reload the page if it's not the first click? — Atav32
– Atav32, Commented Oct 29, 2018 at 21:54

Scott Marcus · Accepted Answer · 2018-10-29 22:04:43Z

3

Your main issue is that you have:

var firstClick = true;

inside the click event handler so every time the button is clicked, it thinks it's the first click. You'd need to have that set outside of the event handler and inside, you'd want to toggle it to the opposite of its current value:

var firstClick = true;

function changeBackground() {
  var myParas = document.getElementsByTagName("p");

  for (var i = 0; i < myParas.length; i++) {
    myParas[i].style.backgroundColor = "yellow";
  }

  var b = document.getElementById("button");

  if (firstClick) {
    b.textContent = "Click to unhighlight";
  } else {
    location.reload();
  }

  firstClick = !firstClick; // Toggle the first click variable
}

But, really instead of reloading the document, just un-highlight the paragraphs. Reloading takes more resources.

Avoid using getElementsByTagName() as it returns a "live node list", which has performance implications.

Also, rather than set up an explicit onload event handler, just position your code at the bottom of the HTML body.

Lastly, use modern standards for event handling (.addEventListener), rather than event properties (onclick).

See comments inline below:

// Place all this code inside of a `<script>` element and place that
// element at the bottom of the code, just before the closing body tag.

let btn = document.querySelector("button"); 

// Modern, standards-based way to set up event handlers
btn.addEventListener("click", changeBackground);

function changeBackground() {
  // Use .querySelectorAll() and convert the results to an array
  var myParas = Array.prototype.slice.call(document.querySelectorAll("p"));

  // Loop over all the paragraphs
  myParas.forEach(function(par){
    // Toggle the CSS class to highlight/or unhighlight them
    par.classList.toggle("highlight");
  });
  
  // Set the button text accordingly
  btn.textContent = myParas[0].classList.contains("highlight") ? "Click to unhighlight" : "Click to highlight";  
}

.highlight { background-color:yellow; }

<p>This is a test</p>
<h1>This is a test</h1>
<p>This is a test</p>
<p>This is a test</p>
<div>This is a test</div>
<p>This is a test</p>
<p>This is a test</p>
<button>Click to highlight</button>

edited Oct 29, 2018 at 22:04

answered Oct 29, 2018 at 21:54

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

QuestionQuestion Over a year ago

Thank you very much for those inline comments, I have a lot of JS learning to do.

QuestionQuestion Over a year ago

and thanks a lot for taking my initial version and providing a functional solution.. thanks for doing what you do.

Jose Rodriguez · Accepted Answer · 2018-10-29 21:57:38Z

0

the problem is that the else sentence never be call, because the "firstClick" variable always will be true each time you call the changeBackGround method you're setting the variable to true.

to avoid this, just declare the variable out of the method, example:

var firstClick=true;
function changeBackground(){
    var myParas = document.getElementsByTagName("p");

    for (var i = 0; i < myParas.length; i++) {
        myParas[i].style.backgroundColor = "yellow";
    }

    var b = document.getElementById("button");

    if (firstClick){
        b.innerHTML = "Click to unhighlight";
        firstClick = false;
    }else{
        location.reload();
        firstClick = true;
    }
}

answered Oct 29, 2018 at 21:57

Jose Rodriguez

2472 silver badges7 bronze badges

Comments

A. Meshu · Accepted Answer · 2018-10-29 22:02:34Z

0

A different approach is to use switch case.

<button id="changeButton">Make my paragraphs Yellow</button>
<script>
var theToggle = document.getElementById("changeButton");
var toggleMe = document.getElementsByTagName("p");
toggleMe.toggleStatus = "on";

theToggle.onclick = function(){
  switch(toggleMe.toggleStatus){
    case "on":
      toggleMe.toggleStatus="off";
      for (var i = 0; i < toggleMe.length; i++) { toggleMe[i].style.backgroundColor = 'yellow'; }     
      theToggle.textContent = "Make my paragraphs White";
      break;
    case "off":
      toggleMe.toggleStatus="on";
      for (var i = 0; i < toggleMe.length; i++) { toggleMe[i].style.backgroundColor = 'white'; }      
      theToggle.textContent = "Make my paragraphs Yellow";
      break;
  }
 }
</script>

Hope that solve it.

answered Oct 29, 2018 at 22:02

A. Meshu

4,1782 gold badges24 silver badges35 bronze badges

3 Comments

Taplar Over a year ago

Why use a two case switch, instead of a simple boolean?

Scott Marcus Over a year ago

And why two loops instead of one?

A. Meshu Over a year ago

I respect your comments and others answers but In my opinion this much easy way to toggle. Another benefit is if you want to add more cases (ie black background and white text) for accessibility purpose etc...

Collectives™ on Stack Overflow

Javascript button toggle

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related