Why can't I change the text of a button in HTML?

Question

I'm trying to change the textcontent of a button in HTML using JavaScript.

It does reach the right if statement (the div is by default not showing), and if I use it on a random header in my HTML code it does change that.

// once page is loaded
window.addEventListener('DOMContentLoaded', (e) => {
  console.log('loaded');
  // get element, and run a function when clicked
  document.getElementById("toggleVisibilityButton").addEventListener("click", () => {
    console.log("show or hide method");

    let element = document.getElementById('reasonsNotConnectedDiv');
    let button = document.getElementById('toggleVisibilityButton');

    //If element is already hidden.
    if (element.style.display === "none") {
      //Change button style whether shown or not.
      button.textContent = 'Hide info ↑'

      //Make contents visible.
      element.style.display = "block"
    }

    //If element is not hidden.
    if (element.style.display === "block") {
      //Change button style whether shown or not.
      button.innerText = button.textContent = "See more ↓"

      //Make content invisible.
      element.style.display = "none"
    }
  });
});

<button name="toggleVisibilityButton" id="toggleVisibilityButton">See more ↓</button> and

I have tried different HTML variants of making a button as shown below as well.

// once page is loaded
window.addEventListener('DOMContentLoaded', (e) => {
  console.log('loaded');
  // get element, and run a function when clicked
  document.getElementById("toggleVisibilityButton").addEventListener("click", () => {
    console.log("show or hide method");

    let element = document.getElementById('reasonsNotConnectedDiv');
    let button = document.getElementById('toggleVisibilityButton');

    //If element is already hidden.
    if (element.style.display === "none") {
      //Change button style whether shown or not.
      button.textContent = 'Hide info ↑'

      //Make contents visible.
      element.style.display = "block"
    }

    //If element is not hidden.
    if (element.style.display === "block") {
      //Change button style whether shown or not.
      button.innerText = button.textContent = "See more ↓"

      //Make content invisible.
      element.style.display = "none"
    }
  });
});

<button name="toggleVisibilityButton" id="toggleVisibilityButton" value="See more ↓"></button>

@Brandon — I think those were examples of two different attempts — Quentin, Jun 18 '21 at 16:08
I see. Just wanted to throw that out there if you weren't getting the element you're expecting back. — Brandon Taylor, Jun 18 '21 at 16:11

score 1 · Answer 1 · answered Jun 18 '21 at 16:14

1

The problem is that you are using two if statements one after another. Instead, convert the second if statement into an else statement or else if.

Whenever display is none and button is clicked, it first executes the code inside the first if statement, then since in this first if section display is turned into "block", the code also enters the second if section. Thus, it resets everything.

answered Jun 18 '21 at 16:14

Eren Yenigül

31
4

You should copy the relevant snippet from the question post (which has been updated) and modify it to demonstrate your answer. – isherwood Jun 18 '21 at 16:18

Why can't I change the text of a button in HTML?

1 Answers1