Trying to make input box appear from button click - Javascript

user_16962135 0
Viewed 4624

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

toggle addeventlistener css html javascript
4 Answers

Couple of things :

  1. 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.

  2. 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>

user_101401240

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">

user_102108410

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>

Admin1 
    <form>
        <fieldset>
            <legend>Competency 15 Event Listeners</legend>
            <ol>
                <li><input type="button" value="click here" onclick="clickMe()"></li>
                <li><input type="text" id="show"></li>
            </ol>
        </fieldset>
    </form>

    <script>
        function clickMe() {
            var text = document.getElementById("show");
            if (!text.style.display) {
                text.style.display = "none";
            }
            if (text.style.display === "none") {
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }
    </script>



form{
    width: 50%;

}

#show {
   display: none;
}

If you use fieldsets, you should use input with a type button to make buttons. I have changed your button to an input with a type button and now it works.

Also, added another if loop that checks if there is a display property and if it is empty "", it sets it to "none". Without the first if loop it will take 2 clicks to show the input, because first you will need your else to set display to "none" and only the second click will set it to "block".

I dont remember why does it work like that, but its just how CSS functions, if you feel like it, use console.log(text.style) to get a full CSS Object and examine it.

user_114268220
Related