Toggle between bold and original font styles with Javascript buttons

Question

Toggle between bold and original font styles with Javascript buttons

I am looking to create a button that toggles the text in a text area between bold and its previous state. This button should be able to switch back and forth with one click.

function toggleTextBold() {
  var isBold = false;
  if (isBold) {
    // Code to unset text as bold
  } else {
    // Code to set text as bold
  }
}

<button onclick="toggleTextBold()">TOGGLE BOLD</button>


<form>
  Enter Text:
  <br>
  <input type="text" name="your text" id="entertext">
</form>

javascript html css

Answer 1

Answer №1

If you want to achieve this effect, Jquery can help you out

Form Section

<button class="toggleStyle">TOGGLE</button>
<form>
  Input Text:
  <br>
  <input type="text" name="userInput" id="textInput">
</form>

Jquery Script

$(".toggleStyle").click(function() {
   document.getElementById("textInput").classList.toggle("style");
});

CSS Styling

.style { font-style: italic; }

Answer 2

If you want to achieve this effect, Jquery can help you out

Form Section

<button class="toggleStyle">TOGGLE</button>
<form>
  Input Text:
  <br>
  <input type="text" name="userInput" id="textInput">
</form>

Jquery Script

$(".toggleStyle").click(function() {
   document.getElementById("textInput").classList.toggle("style");
});

CSS Styling

.style { font-style: italic; }

Answer 3

Answer №2

To make text bold, you can create a class specifically for bold formatting and then apply or remove that class from the text element as needed.

Avoid using HTML event attributes to attach event handlers to DOM objects because:

They result in messy code that is difficult to read and often leads to redundant code.
They introduce global wrapper functions around your custom function, affecting the binding of this within the event handling function.
They do not adhere to the standards outlined in the W3C DOM Event specification.

It's recommended to handle all event bindings in JavaScript and utilize the .addEventListener() method.

// Access DOM elements
var btn = document.getElementById("btnToggleBold");
var txt = document.getElementById("txtInput");

// Listen for button click event and toggle bold class on text element
btn.addEventListener("click", function(){
  txt.classList.toggle("bold");
});

/* This class will be toggled when the button is clicked */
.bold {font-weight:bold; }

<form>
  <div>
    <button id="btnToggleBold">BOLD</button>
  </div>
  <div>
    Enter Text:
    <br>
    <input type="text" name="txtInput" id="txtInput">
  </div>
</form>

Answer 4

To make text bold, you can create a class specifically for bold formatting and then apply or remove that class from the text element as needed.

Avoid using HTML event attributes to attach event handlers to DOM objects because:

They result in messy code that is difficult to read and often leads to redundant code.
They introduce global wrapper functions around your custom function, affecting the binding of this within the event handling function.
They do not adhere to the standards outlined in the W3C DOM Event specification.

It's recommended to handle all event bindings in JavaScript and utilize the .addEventListener() method.

// Access DOM elements
var btn = document.getElementById("btnToggleBold");
var txt = document.getElementById("txtInput");

// Listen for button click event and toggle bold class on text element
btn.addEventListener("click", function(){
  txt.classList.toggle("bold");
});

/* This class will be toggled when the button is clicked */
.bold {font-weight:bold; }

<form>
  <div>
    <button id="btnToggleBold">BOLD</button>
  </div>
  <div>
    Enter Text:
    <br>
    <input type="text" name="txtInput" id="txtInput">
  </div>
</form>

Toggle between bold and original font styles with Javascript buttons

Answer №1

Answer №2

Similar questions

Mongoose managing diverse connections

Identification of input change on any input or select field within the current modal using JavaScript

I'm facing a MongooseServerSelectionError: when trying to connect to 127.0.0.1:27017. Despite trying all the solutions provided on StackOverflow, the issue persists

Maximizing Input Field Utility in React JS

Filtering with multiple attributes in Angular using GroupBy

Creating a unique design for a CSS menu with distinct section dividers and stylish onHover effects

Checking whether a node stream operates in objectMode

Having difficulty retrieving the value of a dynamically selected radio button in AngularJS

Customizing the step function of HTML5 input number with jQuery: A guide

UI and `setState` out of sync

inputting an array of strings into the value attribute of an input element using jQuery

Guide on grabbing characters/words typed next to # or @ within a div element

Navigating through a nested array within a JSON object using Vue.js - a guide

Use the $.get() method in JavaScript to send a parameter to my controller function

Using CSS properties as false values within React applications

The text is not appearing properly in an HTML file due to issues with

Building Effective Web Designs with Bootstrap and Semantic Grid System

List of recommended countries with their respective flags and descriptive text

Sending information through a form via a POST request after clicking on a hyperlink

The Npm generate script is failing to create the necessary routes