Guide to switching a button using JavaScript

Question

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly.

UPDATE: I managed to get it working, but it only toggles twice and then stops functioning.

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";
    }
 }

CSS

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

javascript html css

Answer 1

Answer №1

In order to update the font size dynamically, make sure to utilize fontbutton.value over fontbutton.getElementById.value. Additionally, remove the previous class with fontsize.classList.remove before adding the new one with fontsize.classList.add:

function modifyFontSize(){
     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="modifyFontSize()" style="background-color:#72cf26"  type="submit" value="Increase Font" id = "fontbutton"/>

Answer 2

In order to update the font size dynamically, make sure to utilize fontbutton.value over fontbutton.getElementById.value. Additionally, remove the previous class with fontsize.classList.remove before adding the new one with fontsize.classList.add:

function modifyFontSize(){
     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="modifyFontSize()" style="background-color:#72cf26"  type="submit" value="Increase Font" id = "fontbutton"/>

Answer 3

Answer №2

To meet the mentioned requirement, you can utilize

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

Below is the functional 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>

Desired Output:

https://i.sstatic.net/cJy4o.png

For more details:

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

Answer 4

To meet the mentioned requirement, you can utilize

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

Below is the functional 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>

Desired Output:

https://i.sstatic.net/cJy4o.png

For more details:

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

Answer 5

Answer №3

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

Answer 6

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

Answer 7

Answer №4

Your method seems overly complicated; instead, JavaScript provides a convenient toggle function for adding or removing classes, returning a boolean value in the process.
The only challenge lies in remembering to include !important to ensure proper sizing.

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>

Answer 8

Your method seems overly complicated; instead, JavaScript provides a convenient toggle function for adding or removing classes, returning a boolean value in the process.
The only challenge lies in remembering to include !important to ensure proper sizing.

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>

Guide to switching a button using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Combine and emphasize several gridview rows into a single highlighted unit

Running Selenium tests are not able to initiate Javascript ajax requests

The process of extracting a value from an array of objects encountered an error due to the undefined object

Error: Unable to access the 'location' property because it is undefined

Automatically install modules during the execution of the Node Webkit build process

I attempted to set up a Discord bot using JavaScript on Replit, but unfortunately, it seems to only respond when I mention the bot specifically, rather than to any regular

Creating dynamic routes in react-router-dom using conditions

How can I enable two-finger scrolling on mobile web browsers?

What is the best way to assign a value to process.env within an npm script?

Beware: Inaccessible code detected in Reactjs usage

Switch up the webpage's font using a dropdown selection box

Trouble with shadow rendering in imported obj through Three.js

Angularfire2: Access Denied Error When User Logs Out

Issues with utilizing jQuery AJAX for form submissions

What repercussions come from failing to implement an event handler for 'data' events in post requests?

Obtaining HTML data with ajax within a WordPress post

Can this layout be achieved using DIV elements?

Can you show me the procedure for retrieving a particular element with selenium? (Page Source provided)

Unselecting a span in AngularJS: Switching selection to another span

Express displaying undefined when referring to EJS variable