Функция именования в JavaScript

avatar
BradLee
9 августа 2021 в 05:27
154
1
2

Как вы можете видеть в моем коде ниже, когда я называю свою функцию discount(), функция не запускается при ее вызове. Однако, если я назову его discounts(), он будет работать правильно. Есть ли этому какое-то объяснение?

<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>
Источник
Bravo
9 августа 2021 в 05:29
4

ваш код отлично работает как есть - function discount с onclick="discount()" работает так же хорошо, как function discounts с onclick="discounts()"

Code-Apprentice
9 августа 2021 в 05:30
0

Что вы подразумеваете под "функция не будет работать при вызове"? Что происходит?

Ответы (1)

avatar
Code-Apprentice
9 августа 2021 в 05:38
5

Ваш код дает следующую ошибку:

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

Причина этого в том, что у вас есть следующая строка:

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

Поэтому, когда вы используете onclick=discount(), имя discount здесь относится к элементу <input>, а не к функции discount(). Чтобы устранить проблему, вам нужно использовать для них два разных имени.

Blaze_droid
9 августа 2021 в 05:42
0

Не могли бы вы показать snippet, я не могу заставить его работать.

Code-Apprentice
9 августа 2021 в 05:43
0

@Blaze_droid, вы уже нашли решение. Имя функции не может совпадать с name любого <input>. Я просто объясняю, почему вы должны это сделать.

Blaze_droid
9 августа 2021 в 05:48
0

О да, понял!

BradLee
9 августа 2021 в 05:51
0

ой, я не знал, что это так. Я думал, что круглые скобки делают скидку явно функцией, а не ссылкой на элемент <input>. Спасибо :D

Code-Apprentice
9 августа 2021 в 05:56
0

@BradLee Да, когда вы делаете function discount(), вы создаете функцию с именем discount, но у вас также есть <input type="text" name="discount" id="discount">, которая также создает InputElement с именем discount. Поскольку оба они имеют одно и то же имя, имя discount относится к самой последней созданной вещи, которая называется <input>.

BradLee
9 августа 2021 в 06:12
0

@Code-Apprentice, кстати, как вы проверили ошибку, потому что, когда я использую инструменты разработчика Google, консоль показывает ошибку только в течение нескольких секунд, а затем обновляется, поэтому я не могу увидеть, в чем ошибка

Code-Apprentice
9 августа 2021 в 06:53
0

@BradLee Я использовал https://repl.it вместо того, чтобы сохранять файл HTML на своем экране. Возможно, вы видите, что страница перезагружается, потому что кнопка находится внутри формы. Чтобы временно решить эту проблему, вы можете сделать одно из двух: 1. Удалите <form>. 2. Добавьте type="button" к тегу <button>. Это переопределяет значение по умолчанию type="submit".