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

时间:2015-07-15 06:35:18

标签: javascript button javascript-events textfield src

代码应该执行的操作是,单击时将textField值与给定值进行比较,并相应地更改单击按钮的来源。

它没有那样做。我似乎无法找到原因。    

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

1 个答案:

答案 0 :(得分:1)

请查看我更新的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 2 for window.onload