JavaScript function Not Working with onchange attribute of input tag

Question

I have been trying to replicate Duncan Donut Example from HEAD FIRST JAVASCRIPT, but the function subTotal() is never triggered by onchange event and when I look into HTML REFERENCE, I did not find any onchange event in list provided.

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

The above is my code. I tried running this on IE and Chrome but in vain. Thanks in advance.

First observation. #no of glazed donuts : <input id="glazedonut" type="text" name="glazedonut" onchange="subTotal("/><br><br> - Closing brace is missing. Investigation is on :) — Diptendu
– Diptendu, Commented Dec 2, 2014 at 5:18
The comment by @Cattla is correct. You also have a document.write() call in there which will overwrite the contents of the html page, causing the rest of the function to fail — jasonscript
– jasonscript, Commented Dec 2, 2014 at 5:23

Syscall · Accepted Answer · 2021-04-17 09:46:14Z

6

The problem is you have defined a variable and a function both with the same name subTotal and the variable declaration is overriding the function definition. Change the function name to anything say subTotal1 it will work.

JSBIN link

edited Apr 17, 2021 at 9:46

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Dec 2, 2014 at 5:22

Diptendu

2,1581 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alien · Accepted Answer · 2014-12-02 05:26:14Z

1

change your function name. don't use subTotal(); and don't use document.write("working");

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

onchange="subTotalnew() it gonna be work after input blur.

oninput="subTotalnew() it gonna be work when input entering something.

answered Dec 2, 2014 at 5:26

Alien

3,6761 gold badge18 silver badges35 bronze badges

Collectives™ on Stack Overflow

JavaScript function Not Working with onchange attribute of input tag

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related