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

Asked

Viewed 157 times

0

Guys, I would like to know how I can be doing a calculation, in which I would take a range value and the value of an option and print the result in real time, but even if no option is selected and only the range is changed the value is shown anyway.

An example of JS code, but not functional. https://jsfiddle.net/hnropn0p/

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

javascript html5 input calculus

  • Your question is unclear and lacks code. Can you improve the question pf? (do not use links to external websites)

  • Opá! certainly, I will post.

1 answer

0


You can do it like 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 change the function return generateResult by the operation you want to use.

Browser other questions tagged javascript html5 input calculus

You are not signed in. Login or sign up in order to post.