Calculate values with Inputy type="range" and JavaScript

0

Expensive, hello.

I need to do some calculations using the input type="range", but I'm not able to run the code on my machine, just in online publishers and would like to know why this occurs? I use windows 10 and the text editor is notepad ++.

<!doctype html>
<html lang="en">
<head>

</head>
<body>

<script>
function generateResult() {
  var range1 = parseInt(document.getElementById('range1').value);
  var range2 = parseInt(document.getElementById('range2').value);
  document.getElementById('result').innerHTML = range1 + range2;
}

document.getElementById('range1').addEventListener('change', function(){
  generateResult();
});

document.getElementById('range2').addEventListener('change', function(){
  generateResult();
});

</script>

<div>
   Range
   <input type="range"  class="observe" id="range1">
   <input type="range"  class="observe" id="range2">
</div>

<div>
   Resultado
   <div id="result"></div>
</div>
</body>
</html>
    
asked by anonymous 08.08.2018 / 21:13

1 answer

0

Try to do this:

Html:

<div id="ranges">
   Range
   <input type="range"  class="observe" id="range1">
   <input type="range"  class="observe" id="range2">
</div>

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

Javascript:

function generateResult() {
  var range1 = parseInt(document.getElementById('range1').value);
  var range2 = parseInt(document.getElementById('range2').value);
  document.getElementById('result').innerHTML = range1 + range2;
}

document.getElementById('ranges').addEventListener('change', generateResult);

Not the best way to do it, but it works. Try to run on your computer. Codepen example: link

Edit: I tried to do something to make it simpler but it did not work, I reverted to the previous code. Edit2: Improved the code a bit

    
08.08.2018 / 21:44