Как умножить полученные значения из DOM?

Question

подскажите, пожалуйста, как сделать так, чтобы по взаимодействию с ползунком применялась вот такая формула: первое значение * второе значение = итоговая сумма, а полученные значения выводились в DOM.

value ползунка не должно учитываться в калькуляции

мой неудачный код:

$(document).ready(function(){
  $('#range-yellow').range({
    min: 100,
    max: 1000,
    start: 200,
    onChange: function(value) {
      $('#display-3').html(value);
      let calc =  oneItem * twoItem
      sumItem.text(calc);
    }
  });
});





let oneItem = $(".range-price-item-1");

let twoItem = $(".range-price-item-2");

let sumItem = (".range-price-item-3");

<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="range-conin-wrapper">
        <div class="range-coin">
           <div class="range-input">
            <div class="ui yellow range" id="range-yellow">
              <p>
              Value: <span id="display-3">          </span>
          </p>
            </div>
           </div>
           <div class="range-price">
          <div class="range-price-item">
             <div class="range-price-item-1">
               <h1>Первое значение</h1>
               <p>1</p>
             </div>
            <div class="range-price-item-2">
               <h1>Второе значение</h1>
              <p>2</p>
            </div>
            <div class="range-price-item-3">
              <h1>Итоговая сумма</h1>
              <p>3</p>
            </div>
                   
        </div>
         </div>

Answer 1

let oneItem = $(".range-price-item-1 p");
let twoItem = $(".range-price-item-2 p");
let sumItem = $(".range-price-item-3 p");

$('#range-yellow').range({
  min: 100,
  max: 1000,
  start: 200,
  onChange: function(value) {
    $('#display-3').html(value);
    sumItem.text(+oneItem.text() * +twoItem.text() * +value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet" />

<div class="range-input">
  <div class="ui yellow range" id="range-yellow">
    <p>
      Value: <span id="display-3"></span>
    </p>
  </div>
</div>
<div class="range-price">
  <div class="range-price-item">
    <div class="range-price-item-1">
      <h1>Первое значение</h1>
      <p>3</p>
    </div>
    <div class="range-price-item-2">
      <h1>Второе значение</h1>
      <p>4</p>
    </div>
    <div class="range-price-item-3">
      <h1>Итоговая сумма</h1>
      <p>0</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как умножить полученные значения из DOM?

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