Вычисление процента от цены js

Question

Пытаюсь сделать скрипт, который будет брать на сайте цену товара, вычислять от нее 1% и вписывать в другое поле. Важно что бы это происходило в реальном времени, без нажатия на кнопки, так как цена товара динамически может изменяться в зависимости от выбранного количества товара.

Условно html такого вида:

<div id="product-price">100$</div>

<div>
<span>Ваш кешбэк:</span>
<strong id="bonus-price-result"><!--тут результат вычисления скрипта, в данном случае: 1$--></strong>
<span>$</span>
</div>

Сделал такого плана, но как получить данные цены товара из html и вернуть вычесления в поле кешбэка, не знаю :(

prc=Math.round(100/100*1); {  
document.writeln ('Ваш кешбэк:' +prc+ '$');  
}

Буду очень благодарен за помощь, надеюсь что это пригодится многим!

Answer 1

JS код по вашему условию.

const product = document.getElementById('product-price');    
const result = document.getElementById('bonus-price-result');   

let price = +product.textContent / 100 * 1;
result.textContent = price;

Answer 2

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

Вводить цену в примере придется вручную.

При вводе будем устанавливать цену в слушающийся элемент цены.

Как только цена в слушающемся элементе поменялась - запускаем расчет процента. И, собственно, выводим процент...

// Обсервер будет следить за изменением объекта и вызывать callback при изменении
// В callback производим все расчеты
let observer = new MutationObserver(() => perc.value=(priceLabel.innerHTML/100).toFixed(2));
// А изменения какого именно объекта - определяем первым аргументом ниже
// Вторым аргументом - конфиг
observer.observe(priceLabel,{attributes: true,childList: true, subtree: true});

// При отправке формы на сервер, выключим обсервер, заморозив процент 
document.forms[0].onsubmit = () => observer.disconnect()

// У нас нет источника цен, поэтому цены будем менять вручную
requestAnimationFrame(()=>(document.forms[0].oninput = ()=> priceLabel.innerHTML = price.value)());

<form>
<!-- Этот тег для изменения цены: -->
Цена: <input id="price" type="number" value="68556764.5" /><br/>
<!-- а отсюда будет парситься цена: -->
Цена для получения: <div id="priceLabel"></div><br/>
<!-- А здесь выводить процент -->
Процент: <output id="perc"></output>
</form>

БЛОГ НА HUSL

Вычисление процента от цены js

Ответы (2 шт):