Не работает функция определения числа после нажатия кнопки

Рейтинг: 0Ответов: 1Опубликовано: 03.08.2023

Есть сумма заказа, которая меняется при изменении заданных параметров в инпутах. Есть кнопка, при нажатии которой должна срабатывать функция определения значения суммы, если значение меньше определенного, кнопка не нажимается, и выводится alert. Помогите понять, где ошибка?

var el = document.getElementsByClassName('price-total');
var btn = document.getElementsByClassName('btn');

var numEl = parseInt(el.match(/\d+/));

function summ(element) {
  if (element < 300) alert("Минимальная сумма заказа = 300 руб.");
  return;
}
btn.addEventListener('click', summ(numEl));
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input class="option-value">
  <input class="option-value">
  <div class="pxp-total-price">
    <span class="price-total">150,00 руб.</span>
    <a class="btn" rel="nofollow" title="Заказать">Заказать</a>
  </div>
</body>

</html>

Ответы

▲ 0

где ошибка?

В понимании того, с чем ты имеешь дело...

  • Метод getElementsByClassName возвращает коллекцию элементов
  • Для получения содержимого элемента мало получить ссылку на него
  • Обработчик события должен быть функцией

var el = document.getElementsByClassName('price-total')[0];
var btn = document.getElementsByClassName('btn')[0];

var numEl = parseInt(el.textContent.match(/\d+/));

function summ(element) {
  return function() {
    if (element < 300) alert("Минимальная сумма заказа = 300 руб.");
    return;
  }
}
// обработчик должен быть функцией
btn.addEventListener('click', summ(numEl));
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input class="option-value">
  <input class="option-value">
  <div class="pxp-total-price">
    <span class="price-total">150,00 руб.</span>
    <a class="btn" rel="nofollow" title="Заказать">Заказать</a>
  </div>
</body>

</html>