How to calculate the value of two inputs one of type range and another option and print result in real time?

Question

How to calculate the value of two inputs one of type range and another option and print result in real time?

Navigation

#1 by (0 votes)

0

Well, I would like to know how I can be doing a calculation, where I would get a range value and the value of an option and print the result in real time, even if no option is selected and only the range for changed value is displayed anyway.

A sample JS code, but not functional. link

But I would like to do only with JavaScript, without the use of frameworks or libraries. I already checked the code from the example above, and JQuery was used, and the values of each product are stored in arrays and not in inputs.

javascript html5 input

asked by anonymous 26.04.2017 / 16:43

1 answer

Make content appear according to button clicked on the side menu Python, Selenium and PhantomJs

score 0 · Accepted Answer

You can do this:

function generateResult()
{
  result.innerHTML = +select.value * +range.value;
};

generateResult();

document.querySelectorAll('.observe').forEach(function(element) {
  element.addEventListener('change', generateResult);
});

div {
  margin-bottom: 10px;
}

<div>
  Range
  <input type="range" value="2" class="observe" id="range">
</div>

<div>
  Multiplicado por
  <select id="select" class="observe">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<div>
  Resultado
  <div id="result"></div>
</div>

Just swap the return of the generateResult function for the operation you want to use.