Hide form content until button is clicked-CodePudding

I would like to hide the content of my form until the button is clicked, the code I am using shows content until clicked, I am starting out so probably missing something simple, any help appreciated, the code I am using is:

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

CodePudding user response：

you must add "display: none;" to "myDiv" property in css file then you can use your func

CodePudding user response：

Try this code :

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Because, if display is decalred in css to none (or whatever but not in DOM element) then javascript will "see" it like empty string. Or, set in <div id="myDIV" style="display:none;"></div>. By my opinon, first code is better choice.

CodePudding user response：

I think this is what you need Heres the code:

document.getElementById("myButton").onclick = function() {
document.getElementById("myInput").style.display = "block";
}

<form>
<input type="text" id="myInput" style="display: none;">
</form>
<button id="myButton">Click</button>