Question

我有以下代码，我似乎无法弄清楚为什么它无效。

JavaScript的：

    function hourmin() {
        if (document.getElementById('hourmin').checked == 1){
            document.getElementById('total').value = "01:00";
        }else{
            document.getElementById('total').value = "00:00";
        }
    }

HTML：

    <p>Total Time: <BR><input type="text" style="width:95%;" id="total" name="total" value="" readonly="readonly"/>
    <input type="checkbox" id="hourmin" name="hourmin"  onclick="hourmin();">Pay Hour Minimum?

Answer 1

你在JSFiddle中使用了错误的选项

http://jsfiddle.net/EQHRV/3/

onLoad选项会将整个脚本包装到window.onload中，因此您的函数在全局范围内将无法实现。

window.onload = function(){
    //your code
}

将其更改为

No wrap - in HEAD或No wrap - in BODY

enter image description here

您还可以通过在window上创建引用来强制您的变量/函数在全局范围内可用

window.hourmin = function(){
    ...
}

但我建议避免使用像onclick="etc()"

这样的内联脚本

http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ http://www.unicodegirl.com/from-inline-events-to-addeventlistener.html

编辑：

可能导致此问题无法在您的网站上运行的问题

元素ID应该是唯一的
javascript区分大小写hourmin与hourMin
由于你正在使用内联事件，被调用的函数应该在全局范围内，确保它没有嵌套在另一个函数中
检查文档是否存在语法错误
WebInspector是你的朋友

Safari - WebInspector
Chrome - DevTools
Opera - Dragonfly

Answer 2

您的代码还可以，但我建议您使用onchange代替onclick

<p>Total Time: <BR><input type="text" style="width:95%;" id="total" name="total" value="" readonly="readonly"/>
<input type="checkbox" id="hourmin" name="hourmin"  onchange="hourmin()">Pay Hour Minimum?

DEMO

在您的网站上，它不起作用，可能是 具有相同ID的多个元素的问题

DEMO

在此演示中，我创建了具有相同ID的另一个div：hourmin。你会发现它无法正常工作。

如果您在确定是否存在重复ID时遇到问题。您可以获取event参数onchange="hourmin(event)

中的复选框

DEMO

Answer 3

如果您查看firebug或某些js调试工具，您可以看到找不到您的函数，因为它尚未加载。

更改JSFiddle将您的javascript置于

的位置

像这样：

JSFiddle javascript code placement

如果选中复选框，如何才能更新文本框？

3 个答案: