Naming function in JavaScript

Question

As you can see in my code below, when I name my function discount(), the function does not run when it is called. However if I name it discounts(), it runs properly. Is there any explanation for this?

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>q3</title>
    </head>

    <body>
        <form action="">
            <label> Enter Price:</label>
            <input type="text" name="price" id="name">
            <label>(RM)</label><br><br>
            <label>Enter Discount:</label>
            <input type="text" name="discount" id="discount">
            <label>(%)</label><br><br>
            <button onclick="discount()">Get Discount total</button><br><br>
            <input type="text" name="discountPrice" id="discountPrice">
            <label>(RM)</label>
        </form>
        <script>
            function discount() {
                var price = document.getElementById("name").value;
                var discount = document.getElementById("discount").value;
                var discountPrice = parseFloat(price) * (1 - parseFloat(discount) / 100);
                document.getElementById("discountPrice").value = discountPrice;
            }
        </script>
    </body>

</html>

your code works fine as it is - function discount with onclick="discount()" works just as well as function discounts with onclick="discounts()" — Bravo
– Bravo, Commented Aug 9, 2021 at 5:29
What do you mean by "the function will not work when called"? What happens? — Code-Apprentice
– Code-Apprentice, Commented Aug 9, 2021 at 5:30

Code-Apprentice · Accepted Answer · 2021-08-09 05:38:42Z

5

Your code gives the following error:

TypeError: discount is not a function
    at HTMLButtonElement.onclick (/:14:34)

The reason for this is that you have the following line:

<input type="text" name="discount" id="discount">

So when you use onclick=discount(), the name discount here refers to the <input> element, not the discount() function. You need to use two distinct names for these to fix the problem.

answered Aug 9, 2021 at 5:38

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

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

7 Comments

Blaze_droid Over a year ago

Can you please show a snippet, i can't get it to work.

Code-Apprentice Over a year ago

@Blaze_droid you already found the solution. The function name cannot be the same as the name of any <input>. I'm merely explaining why you have to do this.

Blaze_droid Over a year ago

Oh yes, got it!

BradLee Over a year ago

owh, I didn't know it is like this. I thought the parenthesis made discount distinctly a function rather than refering to the <input> element. Thank you :D

Code-Apprentice Over a year ago

@BradLee Yes, when you do function discount(), you are creating a function named discount, but you also have <input type="text" name="discount" id="discount"> which creates an InputElement with the name discount as well. Since both of these have the same name, the name discount refers to the most recent thing that was created which is the <input>.

|

Collectives™ on Stack Overflow

Naming function in JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related