Question 210058 in Html Question posted in
Some basic documentation can be found here.

How to make a button affect a boolean value in html?

I’m still learning html and Javascript, so I’m not too good at it. I’m trying to make it so that when I press a button, some text switches from "On" to "Off" and vise versa.

function switch_status() {

  //Setting status to opposite
  if (status = "Turn Appearance Off:") {
    status = "Turn Appearance On:"
  };
  
  if (status = "Turn Appearance On:") {
    status = "Turn Appearance Off:"
  };
  
  //Printing it out
  status_print.innerHTML = status;
}

var status = "Turn Appearance Off:";
var status_print = document.getElementById("status_print");

//calling function
switch_status();
<h1 id="status_print">Turn Appearance On:</h1>
<button type="button" onclick="switch_status()">Click Me!</button>

As you can see, it’s supposed to switch from On to Off when I hit the button. But it doesn’t seem to work, help would much be appreciated.

Tags:

4

Answers


  1. 0

    Here’s a slight adaptation of your code. el gets the target element, and is used to get the status and also to give it the newStatus once you’re finished updating the new value.

    function switch_status() {
 let el = document.querySelector('#status_print');
 let status = el.innerHTML;
 let newStatus;
  //Setting status to opposite
  if (status === "Turn Appearance Off:") {
    newStatus = "Turn Appearance On:"
  };
  
  if (status === "Turn Appearance On:") {
    newStatus = "Turn Appearance Off:"
  };
  
  //Printing it out
  el.innerHTML = newStatus;
}
    <h1 id="status_print">Turn Appearance On:</h1>
<button type="button" onclick="switch_status()">Click Me!</button>
    Login or Signup to reply.
  2. 0 
    if (status = "Turn Appearance Off:")

    and

    if (status = "Turn Appearance On:")

    are both performing assignment of status to a truthy string value, meaning the conditions will always be true and each block is always executed in turn.

    This means

        status = "Turn Appearance Off:"

    will always be executed just before the <h1> element is updated.

    You must use == or === for comparing equality.

    Note that this could be controlled with a single boolean, instead of doing string comparisons. bool = !bool is a quick way to flip a boolean value from true to false, and vice versa.

    This can be reduced to:

    const display = document.getElementById("status_print");
let isOn = false;

document.getElementById("toggle").addEventListener("click", () => {
  isOn = !isOn;
  
  display.innerHTML = `Turn Appearance ${isOn ? "Off" : "On"}:`;
});
    <h1 id="status_print">Turn Appearance On:</h1>
<button type="button" id="toggle">Click Me!</button>
    Login or Signup to reply.
  3. 0 
      const element = document.getElementById("status_print");
  var is_shown = false;

  function switch_status() {
    //Setting status to opposite
    element.innerHTML = is_shown ? "Turn Appearance On:" : "Turn Appearance Off:"
    is_shown = !is_shown;
  }
    <h1 id="status_print">Turn Appearance On:</h1>
<button onclick="switch_status()">Click Me!</button>

    Just for a good practice – you should use a boolean to toggle the statement, not set a string and check if it is exactly that string. Even tho this is also working, it’s not really good practice 🙂

    In my code snippet, the element and a boolean gets declared globally and inside the switch function, the innerHTML of the element is getting set either to the one or the other string, depending on the boolean. After that, the boolean is toggled.

    Login or Signup to reply.
  4. 0

    A single = means assignment, so when you write:

      if (status = "Turn Appearance Off:") {

    You are actually setting status to the value of the string.

    Use === for strict equality check.

    Beyond that, see the comments below for additional things to change.

    // Use let to define the scope as block level
// Use const to define a constant
let statusMessage = "";
let status = false;  // Use a Boolean for a binary value
const status_print = document.getElementById("status_print");

// Set up click event handler on the button. Do this in JavaScript
// not with HTML event attributes.
document.querySelector("button").addEventListener("click", switch_status);

function switch_status() {
  // Setting status to opposite
  // Because status is initially false, setting it to the opposite makes it true
  // and vice versa.
  status = !status;

  // Just need to check to see if status === true
  if (status) {
    statusMessage = "Turn Appearance Off:";
  } else {
    statusMessage = "Turn Appearance On:";
  }

  // Printing it out
  // Don't use .innerHTML when there's no HTML in the string
  status_print.textContent = statusMessage;
}
    <h1 id="status_print">Turn Appearance On:</h1>
<button type="button">Click Me!</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search