如果 textField 值匹配，则单击时更改按钮图像源

Question

What the code is supposed to do is, when clicked compare the textField value with the given value and change the source of the clicked button accordingly.

It doesn't do that. I can't seem to find why.

<script type="text/javascript">
    
function check(){
    var txt = document.getElementById('t1').value;

    if(txt == "had"){
    document.getElementById('tick').src = "button-check_basic_green.png";}
    else{document.getElementById('tick').src = "button-check_basic_red.png";}   
};

var press = document.getElementById('tick');
press.addEventListener("click", check);

</script>


<p>You <input type="text" id="t1">one job.</p><input type="image" 
src="button-check_basic_blue.png" id="tick"/>
     

Answer 1

Please look at my updated JSFiddle :

JS:

function check() {
    var txt = document.getElementById('t1').value;

    if (txt === "had") {
        document.getElementById('tick').src = "button-check_basic_green.png";
    } else {
        document.getElementById('tick').src = "button-check_basic_red.png";
    }
};

window.onload = function() {
    var press = document.getElementById('tick');
    press.addEventListener("click", check);
}

EDITED with colored images

EDITED 2 for window.onload