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
– chriskirknielsen, Commented Jun 8, 2020 at 20:21

Damini Ganesh · Accepted Answer · 2020-06-08 20:23:45Z

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 8, 2020 at 20:23

Damini Ganesh

3282 silver badges12 bronze badges

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

Comments

Josh Lind · Accepted Answer · 2020-06-08 20:25:37Z

0

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

answered Jun 8, 2020 at 20:25

Josh Lind

1263 bronze badges

1 Comment

nsog8sm43x Over a year ago

Sorry, but I'm getting that message: ReferenceError: selectedFontSize is not defined

Majed Badawi · Accepted Answer · 2020-06-08 20:36:33Z

0

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>

edited Jun 8, 2020 at 20:36

answered Jun 8, 2020 at 20:31

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

4 Comments

nsog8sm43x Over a year ago

How can I be so wrong? TypeError: document.getElementById(...) is null

Majed Badawi Over a year ago

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.

nsog8sm43x Over a year ago

I also have another bug that makes the function not work. ReferenceError: can't access lexical declaration `counter' before initialization

nsog8sm43x Over a year ago

Unfortunately, but it doesn't work for me. Probably because of those mistakes. Nevertheless, thanks to this answer I learned something new about js.

Sven.hig · Accepted Answer · 2020-06-08 21:24:15Z

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

  });

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related