I'm still very new to html css and JS. I am trying to make an input field appear/toggle from a button click. here is my code so far.
HTML
<form>
<fieldset>
<legend>Competency 15 Event Listeners</legend>
<ol>
<li><button type="text" id="theButton" onclick="clickMe()">Click me!</button></li>
<li><input type="text" name="popup" id="popup"></li>
</ol>
</fieldset>
</form>
CSS
form{
width: 50%;
}
#popup {
display: none;
}
JavaScript
function clickMe(){
var text = document.getElementById("popup");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
I've looked all around the internet and can't seem to find the answer. Thanks in advance
Couple of things :
If the value of button attribute type is invalid (like text here), then the value becomes submit. Inside a form, clicking submit button refreshes the page. So you will have to use a different type.
Initially, the style.display is "" because you are using DOM elements to find it. DOM parser does not have knowledge about styles added with CSS stylesheet. So you will have to include one more condition in your comparison -
if (text.style.display === "none" || text.style.display === "") {
Alternatively, you could have put the style as inline, which will be parsed by the DOM as below:
function clickMe(){
var text = document.getElementById("popup");
console.log(text.style.display);
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}form{
width: 50%;
}<form>
<fieldset>
<legend>Competency 15 Event Listeners</legend>
<ol>
<li><button type="button" id="theButton" onclick="clickMe()">Click me!</button></li>
<li><input type="text" name="popup" id="popup" style="display: none;"/></li>
</ol>
</fieldset>
</form>I would recommend toggling CSS classes instead:
function clickMe() {
var text = document.getElementById("popup");
text.classList.toggle("hide");
text.classList.toggle("show");
}form {
width: 50%;
}
.hide {
display: none;
}
.show {
display: block;
}<button id="theButton" onclick="clickMe()">Click me!</button>
<input type="text" name="popup" id="popup" class="hide">Since you define the initial element display property viaCSS, you may need to use the getComputedStyle method to get the current style
<style>
#popup {
display: none;
}
</style>
<form>
<ol>
<li><button type="button" onclick=toggleMe()>Toggle me!</button></li>
<li><input type="text" id="popup"></li>
</ol>
</form>
<script>
function toggleMe() {
var text = document.getElementById('popup')
text.style.display = window.getComputedStyle(text, null).display === 'none' ? 'block' : 'none'
}
</script>