How to toggle a button with JS

Question

I have a button and it should increase the font size when clicked and if it's clicked again it should decrease the font. Also the value of the button should change to Increase Font / Decrease Font. So, basically I want to make the button toggle from increasing the font to 16px then decreasing to 14px if clicked again.

EDIT: I made it work but it doesn't keep repeating. Only works twice and that's it

HTML

<p id="increase">Lorem Ipsum.</p>

<input onclick="font()" style="background-color:#72cf26"  type="submit" value="Increase Font" id = "fontbutton"/>

JS

function font(){
  var fontsize = document.getElementById('increase');
  var fontbutton = document.getElementById('fontbutton');

  if (fontbutton.value == "Increase Font"){
    fontsize.classList.add("font16");
    document.getElementById('fontbutton').value = "Decrease Font";
  }else if (fontbutton.value == "Decrease Font"){
    fontsize.classList.add("font14");
    document.getElementById('fontbutton').value = "Increase Font";
    }
 }

CS

.font16{
   font-size:16px;
}
.font14{
   font-size: 14px;
}

fontbutton.getElementById.value doesn't make sense. getElementById is a method, which you seem to understand as you use it correctly before this line. — Taplar
– Taplar, Commented May 15, 2020 at 18:18
How would I check the value of the button to make it work then in an if statement then? — John lewis
– John lewis, Commented May 15, 2020 at 18:22
Remove the .getElementById from that line. You don't need that. You already have the button in the fontbutton variable. Just call .value on it. — Taplar
– Taplar, Commented May 15, 2020 at 18:26

Majed Badawi · Accepted Answer · 2020-05-15 18:28:08Z

You should use fontbutton.value instead of fontbutton.getElementById.value and remove the previous class using fontsize.classList.remove to add the new one using fontsize.classList.add:

function font(){
     var fontsize = document.getElementById('increase');
     var fontbutton = document.getElementById('fontbutton');
     if (fontbutton.value == "Increase Font"){
          fontsize.classList.remove("font14");
          fontsize.classList.add("font16");
          fontbutton.value = "Decrease Font";
     }else if (fontbutton.value == "Decrease Font"){
          fontsize.classList.remove("font16");
          fontsize.classList.add("font14");
          fontbutton.value = "Increase Font";
     }
}

.font16{
     font-size:16px;
}
.font14{
     font-size: 14px;
}

<p id="increase" class="font14">Lorem Ipsum.</p>
<input onclick="font()" style="background-color:#72cf26"  type="submit" value="Increase Font" id = "fontbutton"/>

Gopinath · Accepted Answer · 2020-05-15 18:36:55Z

The above requirement can be implemented using

element.classlist.add and element.classlist.remove functions.

Here is a copy of the working code:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .font16{
                font-size:16px;
                background-color:#72cf26;
            }
            .font14{
                font-size: 14px;
                background-color:#72cf26;
            }
        </style>
    </head>
    <body>
        <p id="increase">Lorem Ipsum.</p>
        <button id="fontbutton" class="font14" onclick="toggleFont()">
            Increase Font
        </button>
        <script>
            function toggleFont() {
                var element = document.getElementById("fontbutton")
                var buttonText = element.innerHTML
                element.classList.remove("font14")
                element.classList.remove("font16")
                if(buttonText.indexOf("Increase") >= 0) {
                    element.classList.add("font16")
                    element.innerHTML = "Decrease font"
                } else {
                    element.classList.add("font14")
                    element.innerHTML = "Increase font"
                }
            }
        </script>
    </body>
</html>

Output:

More information:

https://www.w3schools.com/howto/howto_js_toggle_class.asp

Atul Rajput · Accepted Answer · 2020-05-15 18:37:00Z

$(document).ready(function(){
		var flag = true;
		$('.btn').click(function(){
    		$(this).find('span').toggleClass('hidden');
    		if(flag) {
    			$('#increase').addClass('font16');
    			$('#increase').removeClass('font14');
    			flag = !flag;
    		}else {
    			$('#increase').removeClass('font16');
    			$('#increase').addClass('font14');
    			flag = !flag;
    		}
    	});
	});

.font16{
   font-size:16px;
}
.font14{
   font-size: 14px;
}
.hidden {
    		display: none;
    	}

p{ font-size: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="increase">Lorem Ipsum.</p>
    <button class="btn">
    	<span>Increse Font</span>
    	<span class="hidden">Decrese Font</span>
    </button>

Mister Jojo · Accepted Answer · 2020-05-15 20:20:43Z

0

Your approach is complicated, JS directly offers a toggle method to add / delete a class and which returns a boolean value.
The only difficulty is that you should not forget to add !important to upgrade the size.

const paragraphInc = document.getElementById('increase')
  ,   buttonSize   = document.getElementById('fontbutton')
  ;
buttonSize.onclick = () =>
  {
  buttonSize.textContent = (paragraphInc.classList.toggle('Size16'))
                          ? 'Decrease Font'
                          : 'Increase Font'
  }

#fontbutton {
  background-color:#72cf26;
  padding: 7px 12px;
  }
#increase {
  font-size: 14px;
  }
.Size16 {
  font-size: 16px !important;
  }

<p id="increase">Lorem Ipsum.</p>

<button id="fontbutton">Increase Font</button>

edited May 15, 2020 at 20:20

answered May 15, 2020 at 18:31

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

1 Comment

Stephen P Over a year ago

To be pedantic for a moment — it is the DOM Element.classList object that offers the toggle method, that is not a feature of Javascript

Collectives™ on Stack Overflow

How to toggle a button with JS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related