Javascript function to change styling-CodePudding

I have a function here that changes the heading, but i also want to make it so when, the heading has been successfully changed, the "Change Back!" button appears, and then once clicked, it resets the heading and makes the "Change Back!" button disappear 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()">

CodePudding user response：

We can create a css class for "hidden" state and add or remove it as needed.

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"  onclick="reset()">Change Back!</button>

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

CodePudding user response：

I have Added an example code which will reset the value of the heading, give it a try.

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()">

CodePudding user response：

initialize a global variable prevHeadingTxt which is null at the start of the application, and then when the changer() function is called, it sets the value to the previous content of the heading.

that way you can make the heading dynamic and update the previous and current values and also reset it using the prevHeadingTxt variable

var prevHeadingTxt;  //initialize the heading. 

function changer () {
  prevHeadingTxt = document.getElementById("heading").innerHTML;  //store previous heading in headingTxt
  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; 
  document.getElementById("change_back").style.display = 'block';  //make button visible
}

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