Могу ли я использовать переменные, собранные из DOM в расчете Math.round?

Question

Я получаю несколько номеров из DOM , одну оригинальную цену и одну скидочную цену. Теперь я хочу выписать% различий между ними. Эти цифры всегда могут отличаться. Итак, мой вопрос:

Могу ли я рассчитать переменные? Для примера:

((originalPrice - discountPrice) / originalPrice) * 100;, а затем использовать Math.round, чтобы избавиться от десятичных дробей? Когда я пробую это, я получаю только NaN

Вот что я пробовал:

      var originalPrice = document.querySelector('.original-price')
      var discountPrice = document.querySelector('.from-price')

Math.round((originalPrice - discountPrice) / originalPrice) * 100;

Я только получаю NaN. Я ожидаю различия в%

Answer 1

Вещи, которые вы храните в переменных, не значения, они сами <div> (экземпляры HTMLDivElement объекта). И поскольку эти объекты не могут быть проанализированы как числа, попытка вычислить их приводит к NaN.

Чтобы получить эти значения и сделать расчеты, вам необходимо:

1. Получить текстовое содержимое из этих div и
2. Разобрать их в тип Number (по умолчанию все текстовое содержимое имеет тип String).

Итак, ваши переменные могут выглядеть так (как упоминал Прасант Ганезан):

var originalPrice = parseInt(document.querySelector('.original-price').innerText);
// or
var discountPrice = Number(document.querySelector('.from-price').innerText)

Если содержимое этих элементов div гарантировано в виде цифр (не текст), вы сохраните правильные числовые значения в своих переменных и наверняка сможете выполнять вычисления.

Answer 2

Если вы посмотрите на MDN , вы увидите, что вы получаете ссылку на HTML-элемент , в каждом случае, который отличается от его значения.

Из вашего примера неясно, что такое HTML-элемент, но вам нужно либо захватить его TEXT, либо его VALUE