【问题标题】:Change button image source when clicked if textField value matches如果 textField 值匹配,则单击时更改按钮图像源
【发布时间】:2015-07-15 06:35:18
【问题描述】:

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

它不会那样做。我似乎找不到原因。

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

【问题讨论】:

    标签: javascript button dom-events textfield src


    【解决方案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);
    }
    

    用彩色图像编辑

    为 window.onload 编辑了 2

    【讨论】:

    • JSFiddle 看起来不错,但代码不起作用。会不会是我的浏览器有问题?
    • 你用的是什么浏览器?
    • 我也是,它工作正常,当我单击按钮时,它会根据输入的值而变化。怎么了?
    • 它不起作用,因为您在头部调用 JS 并且 DOM 还没有准备好。您应该将最后两行包装在 window.onload 函数中或将脚本放在页脚中。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-15
    • 2013-11-05
    • 1970-01-01
    • 2013-07-24
    • 1970-01-01
    相关资源
    最近更新 更多