Динамически обновлять цену

Мне нужна помощь с функцией JavaScript, которую я не знаю, как реализовать.
Мне нужно сделать магазин для школьного проекта, и мне нужно, чтобы цена динамически обновлялась при добавлении/удалении количеств.
Вот картинка магазина, кнопка +/- работает корректно и все что мне нужно просто обновить цену в кнопке добавить.
Я попытался написать функцию, которая будет брать цену под названием продукта и умножать ее на значение в поле количества, но она не работает.

<button class = "buttonshad buttonstyling bg-primary text-light mx-5">Add <a id = "changingprice">$6.99</a></button>

Динамически обновлять цену

Вот моя функция JavaScript для увеличения и уменьшения:

  function increaseValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
  }

  function decreaseValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('number').value = value;
  }

В основном мне нужно обновить цену на кнопке, когда я добавляю/удаляю количество!

Пожалуйста, поделитесь значимым количеством кода, также отсутствует ссылка на изображение.

Sumant Agnihotri 20.03.2022 20:18

Опубликуйте свою функцию JavaScript в вопросе для лучшего понимания

Madhan S 20.03.2022 20:18

Якорь (<a>) внутри <button>? Странный.

Louys Patrice Bessette 20.03.2022 20:19

Я отредактировал свой пост с вашей рекомендацией :)

Aymane Aaquil 20.03.2022 20:31

Не только странно, но и недопустимо!

Heretic Monkey 20.03.2022 20:31

упс это мой плохой ! Я хотел поместить его на сайт в виде промежутка, а не якоря, поэтому я мог изменить его, не изменяя кнопку, спасибо!

Aymane Aaquil 20.03.2022 20:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот пример для вашего вдохновения.

let basePrice = 6.99;
document.querySelector("#qty").addEventListener("change", function(){
  document.querySelector("#changingprice span").innerText = (basePrice * this.value).toFixed(2)
})
#qty{
  width: 3em;
}
<input type = "number" id = "qty" min = "0" value = "0"/>
<button id = "changingprice" class = "buttonshad buttonstyling bg-primary text-light mx-5">Add $<span>0.00</span></button>

Я попробую это прямо сейчас! Я скоро вернусь к вам, спасибо !!!

Aymane Aaquil 20.03.2022 20:38

Другие вопросы по теме