Как суммировать вывод двух ползунков диапазона javascript (калькулятор комиссии)

Question

Я создаю комиссионный калькулятор с помощью ползунков. У меня есть два ползунка, которые я хочу иметь возможность отображать сумму. У меня есть оба выхода, но я не могу понять, как преобразовать это в итог.

var comslider = document.getElementById("sale");
var comoutput = document.getElementById("saleprice");
comoutput.innerHTML = comslider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
comslider.oninput = function() {
  comoutput.innerHTML = this.value;
}


var slider = document.getElementById("commission_range");
var output = document.getElementById("commission");
// output += (commission / 100);
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

// This is what I have tried 
var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");
var total = parseInt(salep) * parseInt(comp);
// var totalout = document.getElementById("total_commission");
// totalout.innerHTML = total.value;
document.write(total);
// total.oninput = function() {total.innerHTML = this.value;}

<div class="slidecontainer">
  <p>Final sale price of home:</p>
  <input type="range" min="0" max="3000000" value="500000" class="slider" id="sale">
</div>


<div class="slidecontainer">
  <p>Final sale price of home:</p>
  <input type="range" min="0" max="6" value="3" class="slider" id="commission_range" step="0.1">
</div>


<div class="outputbox">
  <p>Final sale price of home: <span id="saleprice"></span></p>
  <p>Commission percentage: <span id="commission"></span>%</p>
  <p>Total commission: <span id="total_commission"></span></p>
</div>

Я ожидаю, что результат умножит значение sale на ('комиссия' / 100), чтобы получить рассчитанную комиссионную стоимость.

Answer 1

Вы выбираете элемент, а не значение.

var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");

И затем вы анализируете и добавляете элемент, а не значение.

var total = parseInt(salep) * parseInt(comp);

Использование

var salep = document.getElementById("saleprice").innerHTML;
var comp = document.getElementById("commission").innerHTML;

Answer 2

Я вижу, что вашей самой большой ошибкой была попытка разобрать html-элементы в целое число и попытаться использовать value свойство переменной total, которое не определено. Я обернул логику, которую вы хотели в функции calcTotalCommission, относительно вашего выбора синтаксиса.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var comslider = document.getElementById("sale");
var comoutput = document.getElementById("saleprice");
var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");
var totalout = document.getElementById("total_commission");
var slider = document.getElementById("commission_range");
var output = document.getElementById("commission");

comoutput.innerHTML = comslider.value; // Display the default slider value
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
comslider.oninput = function() {
  comoutput.innerHTML = this.value;
  calcTotalCommission();
}

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  calcTotalCommission();
}

// Update the totalCommision number with current values
function calcTotalCommission(price, percentage) {
  var total = parseInt(salep.innerHTML) * (parseFloat(comp.innerHTML) / 100);
  totalout.innerHTML = total.toFixed(2);
}

    <div class="slidecontainer">
      <p>Final sale price of home:</p>
      <input type="range" min="0" max="3000000" value="500000" class="slider" id="sale">
    </div>


    <div class="slidecontainer">
      <p>Final sale price of home:</p>
      <input type="range" min="0" max="6" value="3" class="slider" id="commission_range" step="0.1">
    </div>


    <div class="outputbox">
      <p>Final sale price of home: <span id="saleprice"></span></p>
      <p>Commission percentage: <span id="commission"></span>%</p>
      <p>Total commission: <span id="total_commission"></span></p>
    </div>