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>
you must add "display: none;" to "myDiv" property in css file then you can use your func
Try this :
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none" || x.style.display == "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}#myDIV {
border:solid 1px #c0c0c0;
padding:10px;
display:none;
}<input type="button" onclick="myFunction();" value="switch" /><br>
<div id="myDIV">Welcome</div>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.
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>