Onclick没有做任何事情

Question

So here I am wasting few hours on why isn't this thing working. I have a bigger function not working, so I decided to test this small one, yet it isn't working either. There are no errors, but nothing is happening after clicking the button.

<form>
            <input type="text" id="textField">
            <input id="filtrooo" type="submit" value="Click">
    </form>
<script>
        document.getElementById("filtrooo").onclick = function(){
            document.getElementById("textField").innerHTML ="txt";  
        };
</script>

What is wrong here?

Answer 1

That's woking now:

 <form> <input type="text" id="textField"> <input id="filtrooo" type="button" value="Click"> </form> <script> document.getElementById("filtrooo").onclick = function(){ document.getElementById("textField").value = "txt"; }; </script> 

Instead of innerHTML you should write value . And another problem is that when you click submit button the page refreshes and the value of the input clears. So, instead of type="submit" here I use type="button"

Answer 2

Try this:

var filtrooo = document.getElementById("filtrooo");

function functionName() {
    document.getElementById("textField").value ="txt";
}

filtrooo.addEventListener("click", functionName); 

Answer 3

First, with a submit button, the page will be reloaded so you won't see what your code do. Then, don't use .innerHTML . Use .value instead