JavaScript code for modifying style properties

Question

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again.

function changer () {

  var textArea = document.getElementById("text_box").value;

  if (textArea.length === 0) {
     alert("Please enter a value.");
     return;
  }
  var heading = document.getElementById("heading");
  heading.innerHTML = textArea;
}

#change_back {
  display: none;
}

<!-- HTML -->
<h1 id="heading">This is a heading</h1>
<button id="change_back">Change Back!</button>

<input type="text" id="text_box">
<input type="submit" onclick="changer()">

javascript html css

Answer 1

Answer №1

To toggle the visibility of an element, we can define a CSS class for the "hidden" state and dynamically apply or remove it as necessary.

const btnReset = document.getElementById("change_back");
const defaultText = 'This is a heading';

const show = (elem) => {
  elem.classList.remove("hidden");
}

const hide = (elem) => {
  elem.classList.add("hidden");
}

function changer() {

  var textArea = document.getElementById("text_box").value;

  if (textArea.length === 0) {
    alert("Please enter a value.");
    return;
  }
  var heading = document.getElementById("heading");
  heading.innerHTML = textArea;
  show(btnReset);
}

const reset = () => {
  document.getElementById("heading").innerHTML = defaultText;
  hide(btnReset);
}

.hidden {
  display: none;
}

<!-- HTML -->
<h1 id="heading">This is a heading</h1>
<button id="change_back" class="hidden" onclick="reset()">Change Back!</button>

<input type="text" id="text_box">
<input  id="btn_submit" type="submit" onclick="changer()">

Answer 2

To toggle the visibility of an element, we can define a CSS class for the "hidden" state and dynamically apply or remove it as necessary.

const btnReset = document.getElementById("change_back");
const defaultText = 'This is a heading';

const show = (elem) => {
  elem.classList.remove("hidden");
}

const hide = (elem) => {
  elem.classList.add("hidden");
}

function changer() {

  var textArea = document.getElementById("text_box").value;

  if (textArea.length === 0) {
    alert("Please enter a value.");
    return;
  }
  var heading = document.getElementById("heading");
  heading.innerHTML = textArea;
  show(btnReset);
}

const reset = () => {
  document.getElementById("heading").innerHTML = defaultText;
  hide(btnReset);
}

.hidden {
  display: none;
}

<!-- HTML -->
<h1 id="heading">This is a heading</h1>
<button id="change_back" class="hidden" onclick="reset()">Change Back!</button>

<input type="text" id="text_box">
<input  id="btn_submit" type="submit" onclick="changer()">

Answer 3

Answer №2

Feel free to test out the example code provided below that will reset the heading value.

const defaultText = 'This is a heading';

function resetText () {
  document.getElementById("change_back").style.display = 'none';
  var heading = document.getElementById("heading");
  heading.innerHTML = defaultText;
}

function changer () {
  document.getElementById("change_back").style.display = 'block';
  var textArea = document.getElementById("text_box").value;

  if (textArea.length === 0) {
     alert("Please enter a value.");
     return;
  }
  var heading = document.getElementById("heading");
  heading.innerHTML = textArea;
}

#change_back {
  display: none;
}

<!-- HTML -->
<h1 id="heading">This is a heading</h1>
<button onClick="resetText()"  id="change_back">Change Back!</button>

<input type="text" id="text_box">
<input type="submit" onclick="changer()">

Answer 4

Feel free to test out the example code provided below that will reset the heading value.

const defaultText = 'This is a heading';

function resetText () {
  document.getElementById("change_back").style.display = 'none';
  var heading = document.getElementById("heading");
  heading.innerHTML = defaultText;
}

function changer () {
  document.getElementById("change_back").style.display = 'block';
  var textArea = document.getElementById("text_box").value;

  if (textArea.length === 0) {
     alert("Please enter a value.");
     return;
  }
  var heading = document.getElementById("heading");
  heading.innerHTML = textArea;
}

#change_back {
  display: none;
}

<!-- HTML -->
<h1 id="heading">This is a heading</h1>
<button onClick="resetText()"  id="change_back">Change Back!</button>

<input type="text" id="text_box">
<input type="submit" onclick="changer()">

Answer 5

Answer №3

Start the application by initializing a global variable called prevHeadingTxt as null. Upon calling the changer() function, this variable will hold the previous content of the heading.

This mechanism allows for dynamic updates to the heading, keeping track of both the current and previous values. The value can also be reset using the prevHeadingTxt variable.

let prevHeadingTxt;  // Initialize the heading. 

function changer () {
    prevHeadingTxt = document.getElementById("heading").innerHTML;  // Store the previous heading
    let textArea = document.getElementById("text_box").value;

    if (textArea.length === 0) {
       alert("Please enter a value.");
       return;
    }

    let heading = document.getElementById("heading");
    heading.innerHTML = textArea; 
    document.getElementById("change_back").style.display = 'block';  // Make the button visible
}

function resetHeading(){
    let heading = document.getElementById("heading").innerHTML = prevHeadingTxt;
    document.getElementById("change_back").style.display = 'none';   // Hide the button after reset 
}

Answer 6

Start the application by initializing a global variable called prevHeadingTxt as null. Upon calling the changer() function, this variable will hold the previous content of the heading.

This mechanism allows for dynamic updates to the heading, keeping track of both the current and previous values. The value can also be reset using the prevHeadingTxt variable.

let prevHeadingTxt;  // Initialize the heading. 

function changer () {
    prevHeadingTxt = document.getElementById("heading").innerHTML;  // Store the previous heading
    let textArea = document.getElementById("text_box").value;

    if (textArea.length === 0) {
       alert("Please enter a value.");
       return;
    }

    let heading = document.getElementById("heading");
    heading.innerHTML = textArea; 
    document.getElementById("change_back").style.display = 'block';  // Make the button visible
}

function resetHeading(){
    let heading = document.getElementById("heading").innerHTML = prevHeadingTxt;
    document.getElementById("change_back").style.display = 'none';   // Hide the button after reset 
}

JavaScript code for modifying style properties

Answer №1

Answer №2

Answer №3

Similar questions

How wide should the website layout be?

What is the best method for accessing a specific Data value on the route?

Managing the invocation of a promise multiple times in AngularJS, and handling some specific exceptions

Ways of extracting specific information from a JSON file with the help of jQuery

Is it possible to retrieve 2 arguments within a function in a non-sequential manner?

Concealing unnecessary borders on list elements using jQuery

Can anyone provide guidance on how to trigger 3 unique functions in a specific order using JavaScript?

Background PHP/JS authentication through HTTP

Guide to retrieving and editing images from Appwrite using Vue

Translating Bootstrap 5 into Angular components for version 13 and above

Struggle with the background div menu

Problem with Jquery Ajax, failing to recognize option values

Guide to finding your way to a specific section in React

Having difficulty incorporating custom JavaScript files into a testing framework

Transferring application configurations across modules

Checking for the existence of a value in an object using Angular loops

Explore the flexibility of npm by installing and utilizing various versions of a specific package

The React data editor Dialog closes when the drop-down is clicked without triggering any onChange events

Finding the index and value of a specific HTML element with jQuery click event

How come the error message in AngularJS is appearing as blank during error handling?