How to add another event with a second click and a third click in javascript?

Question

After a few hours of trial and error I put my post here with a question, maybe one of you will be able to help me. I've created a function that is called with the "onclick" attribute after clicking on the button. This function changes font size in selected elements of the page. I would like to add a different percentage, e.g. 200% at second click on the button. I'd appreciate any help.

JS code:

document.getElementsByClassName("increase-size").addEventListener("click", increasSize);

function increasSize() {
  var x = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, input, a");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.fontSize = "150%";
  }
}

HTML code:

<button type="button" class="increase-size" onclick="increasSize()"></button>

I tried to solve it with a counter, but I failed.

document.getElementsByClassName("increase-size").addEventListener("click", increaseSize);

var counter = 0;

function increaseSize() {
  counter += 1;
  var x = document.querySelector("html");
  var i;
  for (i = 0; i < x.length; i++) {
    if(counter == 1) {
      x[i].style.fontSize = "150%";
    } else if (counter == 2) {
      x[i].style.fontSize = "200%";
    }
  }
}

Your counter gets reset every time your function is called. Declare it outside of the function and access it within your function. You can then increase your counter with `counter++` at the end of your function. Also, please note your function is misnamed `increasSize` instead of `increaseSize` ("e" before "Size"). Works fine but it's good to avoid typos like that to easily reference the function somewhere else without having to dig back to the source. — chriskirknielsen, Jun 08 '20 at 20:21

score 0 · Answer 1 · answered Jun 08 '20 at 20:23

0

Counter seems like a good option. I found this HTML/Javascript Button Click Counter may be make sure its a global variable and it should work ?

answered Jun 08 '20 at 20:23

Damini Ganesh

288
1
10

score 0 · Answer 2 · answered Jun 08 '20 at 20:25

make some global variables

fontSizes = ['100%', '150%', '200%'];
selectedFontSizeIndex = 0;

Then in your click function:

function increaseSize() {
  selectedFontSizeIndex++;
  selectedFontSizeIndex = selectedFontSize % fontSizes.length;
  var x = document.querySelector("html");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].style.fontSize = fontSizes[selectedFontSizeIndex];
  }
}

This will continue to loop through your options. Let me know if any of the lines of code need more explanation

Sorry, but I'm getting that message: ```ReferenceError: selectedFontSize is not defined``` — nsog8sm43x, Jun 09 '20 at 08:23

Majed Badawi · Answer 3 · 2020-06-08T20:36:33.503

Your code has several problems:

increase-size should be the id instead of the class and called as document.getElementById("increase-size"). Otherwise, you can use it as document.getElementsByClassName("increase-size")[0] since it returns a list of elements.
The click function should be passed the function name only, otherwise, it will be called twice:

<button type="button" class="increase-size" onclick="increasSize"></button>

counter should be a global variable and incremented in every call. The way it is used here is set to zero every time the function is used.
You do not need the for loop.
It is a better practice not to have typos in function names: rename it to increaseSize.
You only need to set the listener once, either in the html or JavaScript. It is better to leave the js part.

The final solution is as follows:

document.getElementById("increase-size").addEventListener("click", increaseSize);
let counter = 0;
function increaseSize() {
  console.log(counter);
  counter++;
  var x = document.querySelector("html");
  if(counter == 1) {
      x.style.fontSize = "150%";
  } else if (counter == 2) {
      x.style.fontSize = "200%";
  }
}

<html>
<button type="button" id="increase-size">Increase</button>
<h1>Hello</h1>
<h2>World</h2>
</html>

How can I be so wrong? TypeError: document.getElementById(...) is null — nsog8sm43x, Jun 08 '20 at 20:47
These are not all problems but bad practices in general. Make sure you change the class to the id if you want to use it like this, and place the script at the end of your body. — Majed Badawi, Jun 08 '20 at 20:52
I also have another bug that makes the function not work. ReferenceError: can't access lexical declaration `counter' before initialization — nsog8sm43x, Jun 08 '20 at 21:03
Unfortunately, but it doesn't work for me. Probably because of those mistakes. Nevertheless, thanks to this answer I learned something new about js. — nsog8sm43x, Jun 09 '20 at 08:20

score 0 · Answer 4 · answered Jun 08 '20 at 21:24

You can achieve that by make a simple switch using a boolean that will increase and decrease font-size upon clicking the button. Here is how it will work

    var swit=true
      document.getElementById("increase-size").addEventListener(click, ()=>{
  function increasSize() {
  //150%
  if(swit){
  var x = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, input, a");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.fontSize = "150%";
    }
    swit=false
    return
  }
  // 200%
  if (!swit){

  var x = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, input, a");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.fontSize = "200%";
    }
    swit=true
    return
  }
  }
   increasSize() 

  });

How to add another event with a second click and a third click in javascript?

4 Answers4