Hide/show element if input has value

I want to hide or show an element based on if an input field has a value. Right now I have this, but the issue here is that it will add visible class every time a key is pressed and the value is not empty. Which is not correct and will lead to many problems down the line.

Is there a built in JavaScript event that I can use to check if the element is empty or not? What is the best way to do this with using the least amount of resources?

const query_input = document.getElementsByClassName("query")[0];

query_input.addEventListener('input', event => {

    if (query_input.value == ""){

        document.getElementsByClassName("submit")[0].classList.add("hidden");

        console.log ("empty");
    }else{
        console.log ("not empty");

        document.getElementsByClassName("submit")[0].classList.add("visible");
    }

});