Calculate values with Inputy type="range" and Javascript

Asked

Viewed 210 times

0

Dear, hello.

I need to do some calculations using input type="range", but I am not able to run the code on my machine, only in online editors and I would like to know why this occurs? I use windows 10 and the text editor is the 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>
javascript html input
  • 1

    Hello Marck can explain better "do some calculations" and what do you mean by "I’m not getting the code running"? which error, expected result, etc?

  • Hello, referring to the calculation would be add, divide and etc.

  • You have to know exactly what you want to do, give concrete examples of the various calculations you want to do and where they would enter the page. As a note, do not +range1.value to convert to whole unless you are in a codegolf competition.

  • Come on, the question of "calculations" I have already managed to do, which is to add the two inputs, but I’m not able to run them unless by online editors like the one available by stackoverflow

  • Another error I found: In the result.innerHTML line, unless you have assigned some value to some variable called result, it must present some error. Should be document.getElementById('result').innerHTML = //atribuição

  • So the code works on Jsfiddle but not local

  • I believe that if you focus on solving syntax errors and worry less about where it works and where it doesn’t work you’ll get the answer sooner.

  • I made the changes you had informed but still not working

  • I’m making a code to put in the answer and then you can see where you missed, wait a moment

  • Okay, thank you very much

Show 5 more comments

1 answer

0


Try to do it this way:

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);

It’s not the best way to do it, but it works. Try running it on your computer. Example in codepen: https://codepen.io/matt1991/pen/xJQgrb?editors=1010

Edit: I tried to do something to make it simpler but it didn’t work, revert to the previous code. Edit2: Slightly improved code

  • It still didn’t work, I edited the question of how I did it.

  • What error appears on console? What happens?

  • Uncaught Typeerror: Cannot read Property 'addeventlistener' of null at index.html:15

  • Place javascript after all html at the end of the body and try again.

  • Man, that’s right, thank you very much

  • The error occurred because you tried to take the value of an input that had not been created yet. html executes the code from top to bottom. Whenever you refer to something in html, use document.getElementById('id do valor'), unless you assign this value to a variable to make it easier to read the code like I did with the ranges. If possible, mark my answer as the solution, unless you want to expect better code (which surely exists)

Show 1 more comment

Browser other questions tagged javascript html input

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