Расчет и отображение% скидки для ценовых классов Javascript

Мне нужна помощь с javascript. Мы пытаемся рассчитать и отобразить разницу в процентах между ценой до скидки и ценой после скидки. Соответствующие классы: .from_price и .for_price. Цены выглядят так: 160,00 и 130,00.

Итак, мы пытались использовать этот код, но он не работает:

var price = (Math.round($(".from_price").html())).toString();
var sale = (Math.round($(".for_price").html())).toString();
var korting = (Math.round(((sale - price)/price)*100)).toString();
$("#discount").html("You receive" + korting + "%" + " " + "discount");
}

Большое спасибо за Вашу помощь!


javascript price discount
person Tester    schedule 17.08.2018    source источник
comment
Поплавки обозначаются точкой, а не запятой. Итак, 160,00 должно быть сначала 160,00. Просто замените на ..   -  person Markus Zeller    schedule 17.08.2018
comment
Связано: https://stackoverflow.com/questions/2085275/what-is-the-decimal-separator-symbol-in-javascript   -  person evolutionxbox    schedule 17.08.2018
comment
Не могли бы вы рассказать нам, что вы пытаетесь сделать? Математика или javascript?   -  person NicossB    schedule 17.08.2018

Ответы (3)


arrow_upward
2
arrow_downward

Это потому, что вы используете строковые значения для получения значения скидки. Вы можете преобразовать 160,00 в 160 с помощью parseFloat ()

function getDiscount() {
  var price = parseFloat($(".from_price").html());
  var sale = parseFloat($(".for_price").html());
  console.log(price);
  console.log(sale);
  var korting = (Math.round(((sale - price)/price)*100));
  $("#discount").html("You receive" + korting + "%" + " " + "discount");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="from_price">160,00</div>
<div class="for_price">130,00</div>
<button type="button" onclick="getDiscount()">get discount</button>
<div id="discount"></div>

person NicossB    schedule 17.08.2018

arrow_upward
0
arrow_downward

Вот пример:

var price = +((Math.round($(".from_price").html())).toString());
var sale =  +((Math.round($(".for_price").html())).toString());
var korting = (Math.round(((sale - price)/price)*100)).toString();

$("#discount").html("You receive "+ korting + " %discount");



console.log(typeof sale);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="from_price">100</div>
<div class="for_price">50</div>

<div id="discount"></div>

Ваша проблема заключалась в том, что вы пытаетесь выполнять вычисления со строками, это не работает так, как вы ожидаете. Поэтому я преобразовал ваши строки в числа со знаком + и круглыми скобками. Вот пример:

const el = document.getElementById('test').innerHTML;

console.log(el);
console.log(typeof el);

const sumString = el + el;

console.log(sumString); // the string 10 gets added to another string of 10 and thus forms 1010

const sumNr = parseFloat(el) +  +(el);  // now the strings are coered to numbers, both parseFloat and  +(yourvar) coerce strings to nubmers.
console.log(sumNr);
<div id="test">10</div>

person Willem van der Veen    schedule 17.08.2018

arrow_upward
0
arrow_downward

Не используйте имена классов в качестве селекторов элементов (что, если ваш документ содержит несколько элементов с классом .from_price?). Не полагайтесь на innerHTML для ваших (числовых) значений. Использование атрибутов данных для значений цен дает вам полный контроль над ним. Я бы предложил использовать css и атрибут данных для отображения процента скидки. Наконец, для этого вам действительно не нужен jQuery.

Вот простой (html на голландском) фрагмент, с которым можно поиграть

(() => {
  const price = +document.querySelector("[data-fromprice]").dataset.fromprice;
  const sale = +document.querySelector("[data-forprice]").dataset.forprice;
  const discountPercentage = ((1-(sale/price)) * 100).toFixed(0);
  document.querySelector("[data-discount]").dataset.discount = discountPercentage;
})();
[data-discount]:before {
  content: attr(data-discount)'%';
  color: red;
  font-weight: bold;
}
<p>Van <span data-fromprice="160">€160,00</span></p>
<p>Voor <span data-forprice="130">€130,00</span>!</p>
<p>Uw korting: <span data-discount=""></span></p>

person KooiInc    schedule 17.08.2018