Html Question posted in
Some basic documentation can be found here.

Html – adding event listener to input box and checking if it's empty

I’m trying to add an event listener to my input box, to check if it’s empty. If it is empty then hide autoComplete-Box-id. But when I load the page and the input box is empty it show’s the element. How do I fix this?

HTML:

        <span>
          <input id="originInput" style="width: 350px;" name="origin" type="text" placeholder="Origin">
        </span>
        <div id="autoComplete-Box-id"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <span>
          <input style="width: 350px;" name="destination" type="text" placeholder="Destination">
        </span>
      </form>`

JS:

    let getOriginInput = document.getElementById("originInput");

    getOriginInput.addEventListener("input", function(e) {
      
      console.log(e.target.value.length);
  
      if(e.target.value == ""){
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="none";
      }else{
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="";
      }
    });

CSS:

#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
}

I tried checking e.target.value.length and trying to see if the length was = 0. If so I, would be able to make the element disappear on load and re-appear when there was input in the box.

Tags:

2

Answers


  1. 0

    Try using the "keypress" event.

    Edit: Also, make sure your the js code is placed after the input on your html. Or if you use a script, you can use the defer attribute to make the script load once the page is loaded.

    <script src='myscript.js' defer></script>
    Login or Signup to reply.
  2. 0

    All you need to do is move your code into a function, I call it setDisplay(), you can call it anything you want. Replace

    e.target.value

    with

    getOriginInput.value

    Then call that function at the beginning of your js file, as well as from inside your event handler.

    You can run this code snippet to see it work.

        let getOriginInput = document.getElementById("originInput");
    
    setDisplay( )

    getOriginInput.addEventListener("input", function(e) {
      setDisplay( )
    });

    function setDisplay( ) {
      if(getOriginInput.value == ""){
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="none";
      }else{
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="";
      }
    }
    #autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
}
            <form>
          <span>
            <input id="originInput" style="width: 350px;" name="origin" type="text" placeholder="Origin">
          </span>
        <div id="autoComplete-Box-id"></div>
        <br><br><br><br><br>
        <span>
          <input style="width: 350px;" name="destination" type="text" placeholder="Destination">
        </span>
      </form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search