Change text on the button

Question

I have a form and I have a button that is filtering some required fields. It's all working nicely but I want to also change the text of the button. For example: by default it displays you all fields in the form, when you click the button (show required fields) it displays you only required fields, here I want change text on the button to displays text (Show all).

Here is my code:

 <button type="checkbox" onclick="yesnoCheck();" id="yesCheck" value="Show required fields">Show required fields</button> <br>
 <div id="ifYes">
   <input type="text" value=""  /> One
   <input type="text" value="" />Two
   <input type="text" value="" />Three
   <input type="text" value="" required/>Four
 </div>

JS:

   function yesnoCheck() {
        var x = document.getElementById("ifYes");
        if (x.style.display === "none") {
            x.style.display = "flex";

        } else {
            x.style.display = "none";

        }
    }

Basically, when you click the button to show the required fields I want to change text to "Show all".

score 0 · Accepted Answer · answered May 23 '19 at 11:22

Is this what you're looking for?

function yesnoCheck() {
    var x = document.getElementById("ifYes");
    var button =             document.getElementById("yesCheck");

    if (x.style.display === "none") {
        x.style.display = "flex";
        button.textContent = "Show required fields";

    } else {
        x.style.display = "none";

        button.textContent = "Show All";
    }
}

 <button type="checkbox" onclick="yesnoCheck();" id="yesCheck" value="Show required fields">Show required fields</button> <br>
 <div id="ifYes">
   <input type="text" value=""  /> One
   <input type="text" value="" />Two
   <input type="text" value="" />Three
   <input type="text" value="" required/>Four
 </div>

Change text on the button

1 Answers1