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, eg 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%";
}
}
}
4 answers
solution1
0 2020-06-08 20:23:45
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?
solution2
0 2020-06-08 20:25:37
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
solution3
0 2020-06-08 20:31:10
Your code has several problems:
-
increase-sizeshould be theidinstead of theclassand called asdocument.getElementById("increase-size"). Otherwise, you can use it asdocument.getElementsByClassName("increase-size")[0]since it returns a list of elements. - The
clickfunction should be passed thefunctionname only, otherwise, it will be called twice:
<button type="button" class="increase-size" onclick="increasSize"></button>
-
countershould be a global variable andincrementedin 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
htmlorJavaScript. It is better to leave thejspart.
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>
solution4
0 2020-06-08 21:24:15
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()
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.