How can I change the text of a button with Javascript?-CodePudding

I'm trying to make it so that a simple collapsible disclosure button will trigger a window that will display the disclosure (or in this case filler text) and then hide it again when clicked. I've got the collapsed code working for the most part but the part I can't get right is the right-pointing arrow which I'm using Unicode to generate. I want it to change to a down-pointing arrow but for some reason, I can't get the script to work.

I am very new to this and I've been trying to piece together various solutions I've found here but unfortunately, I've hit a roadblock I can't seem to locate.

My code also throws an error saying that the disclosure collapse function isn't a function even though it's defined and does appear to do it's job. It's just the text change function that does nothing on click.

At some point I'd like to swap out the Unicode arrows for chevron svgs since those don't get formatted on mobile devices like the Unicode arrows do but I need to figure out the JS part first before I make this any more complicated.

// Disclosure Display //
var acc = document.getElementsByClassName("disclosureAccordionBtn");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function(displayDisclosure) {
    this.classList.toggle("active");
    var disclosurePanel = this.nextElementSibling;
    if (disclosurePanel.style.display == "block") {
      disclosurePanel.style.display = "none";
    } else {
      disclosurePanel.style.display = "block";
    }
  });
}
// Disclosure Label Text Change Arrow Direction //
function disclosureLabelText() {
  var btn = document.getElementById("disclosureLabel");

  if (btn.value == "&#9654;Disclosure") {
    btn.value = "&#9660;Disclosure";

  } else {
    btn.value = "&#9654;Disclosure";
  }
}

<!-- disclosure button -->
<input id="disclosureLabel"  type="button" onclick="displayDisclosure(); disclosureLabelText();" value="&#9654;Disclosure" style="outline: none; border: none; color: #646464; cursor: pointer; text-decoration: none; background-color: transparent; text-align: center; font-size: 11px"
/>

<!-- disclosure collapse -->
<div id="displayDisclosure"  style="display: none; outline: none; border: none; color: #646464; text-decoration: none; background-color: transparent; text-align: center; font-size: 11px; text-align: justify; text-justify: inter-word; margin-left: 0.5%; margin-right: 0.5%; margin-top: -0.7%; margin-bottom: 0.5%">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
  sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Here's a JSFiddle with everything in it as well:

https://jsfiddle.net/ts0p94bk/

CodePudding user response：

To fix the issue, remove displayDisclosure() from the onclick attribute value. It works fine after that.

In the code displayDisclosure is the callback function parameter when you are adding the event listener to the button.

Here's how I might implement what you are doing:

<head>
  <style>
    span.up {
      display: none;
    }
    span.down {
      display: inline;
    }
    p.content {
      display: none;
    }
    .showContent span.up {
      display: inline;
    }
    .showContent span.down {
      display: none;
    }
    .showContent p.content {
      display: block;
    }
  </style>
</head>
<body>
  <section id="container">
    <button id="toggleButton">
      <span >&#9660;</span>
      <span >&#9654;</span> 
      Button Label
    </button>
    <p >
      My content
    </p>
  </section>
  <script>
    const container = document.getElementById('container');
    const button = document.getElementById('toggleButton');
    button.addEventListener('click', () => container.classList.toggle('showContent'));
  </script>
</body>