JavaScript函数不适用于输入标签的onchange属性答案

【问题标题】：JavaScript function Not Working with onchange attribute of input tagJavaScript函数不适用于输入标签的onchange属性
【发布时间】：2015-01-30 06:38:33
【问题描述】：

我一直在尝试从 HEAD FIRST JAVASCRIPT 复制 Duncan Donut 示例，但函数 subTotal() 从未被 onchange 事件触发，当我查看 HTML REFERENCE 时，我在提供的列表中没有找到任何 onchange 事件。

Duncan.html

    <html>
    <head><title>Duncan Online Donut's Service</title></head>
    <script type="text/javascript">

        function subTotal(){
            document.write("working");
            const TAXRATE = 0.095;
            const DONUTRATE = 0.5;
            var tax = 0;
            var subTotal = 0;
            var total = 0;
            var cakedonut = parseInt(document.getElementById("cakedonut").value);
            var glazedonut = parseInt(document.getElementById("glazedonut").value);

            if(isNaN(cakedonut))
                cakedonut = 0;
            if(isNaN(glazedonut))
                glazedounut = 0;

            subTotal = (cakedonut + glazedonut)* DONUTRATE ;
            tax = subTotal * TAXRATE ;
            total = subTotal + tax ;
            document.getElementById("subTotal").value = "$" + subTotal.toFixed(2);
            document.getElementById("tax").value = "$" + tax.toFixed(2);
            document.getElementById("total").value = "$" + total.toFixed(2);    
        }
    </script>
    <body>
        <h1><b><i>Duncan Online Donut's Service</i></b></h1>
        <form>
            Name : <input id="name" type="text" name="name"/><br><br>
            #no of cake donuts : <input id="cakedonut" type="text" name="cakedonut" onchange="subTotal()"/><br><br>
            #no of glazed donuts : <input id="glazedonut" type="text" name="glazedonut" onchange="subTotal("/><br><br>
            subTotal : <input id="subTotal" type="text" name="subTotal" /><br><br>
            tax : <input id="tax" type="text" name="tax" /><br><br>
            Total : <input id="total" type="text" name="total"/><br><br>
            <input type="submit"/><br><br>
        </form>
    </body>
</html>

JSFiddle

以上是我的代码。我尝试在IE and Chrome 上运行它，但徒劳无功。提前致谢。

【问题讨论】：

@cattla 没用。
第一次观察。 #no of glazed donuts :

- 缺少右括号。调查正在进行中:)跨度>
更改您的函数名称。不要使用 subTotal();
@Diptendu 我确实添加了括号仍然不起作用。
@Cattla 的评论是正确的。您还有一个 document.write() 调用，它将覆盖 html 页面的内容，导致函数的其余部分失败

标签： javascript html google-chrome internet-explorer

【解决方案1】：

问题是你已经定义了一个变量和一个函数，它们都具有相同的名称subTotal，并且变量声明覆盖了函数定义。将函数名称更改为 subTotal1 即可。

JSBIN link

【讨论】：

【解决方案2】：

更改您的函数名称。不要使用subTotal();，也不要使用document.write("working");

function subTotalnew()
{
alert('working');
}

onchange="subTotalnew() 输入blur 后会生效。

oninput="subTotalnew() 输入entering something 即可工作。

【讨论】：