Why isn't this meter working?

Question

So I have this code (Fiddle):

(function() {
  var meter = document.getElementById('somemeter');
  var Likes = document.getElementById('likes');
  var Dislikes = document.getElementById('dislikes');

  meter.max = Likes.innerHTML + Dislikes.innerHTML;
  meter.value = Likes.innerHTML - Dislikes.innerHTML;
})();

<div id="likes">500</div>
<div id="dislikes">50</div>
<meter value="10" min="0" max="1000" id="somemeter"></meter>

As you can see, Likes.innerHTMLis 500 , and Dislikes.innerHTML is 50

For some reason, the meter.max doesn't work when I use Likes.innerHTML or Dislikes.innerHTML; however, when I substitute those in the meter.max for 500 and 50, it does work.

Am I doing something wrong?

score 3 · Answer 1 · answered Sep 29 '16 at 17:52

3

Your code is taking the innerHTML as string. Use parseInt instead:

(function() {
  var meter = document.getElementById('somemeter');
  var Likes = document.getElementById('likes');
  var Dislikes = document.getElementById('dislikes');

  meter.max = parseInt(Likes.innerHTML, 10) + parseInt(Dislikes.innerHTML, 10);
  meter.value = parseInt(Likes.innerHTML, 10) - parseInt(Dislikes.innerHTML, 10);
})();

<div id="likes">500</div>
<div id="dislikes">50</div>
<meter value="10" min="0" max="1000" id="somemeter"></meter>

answered Sep 29 '16 at 17:52

Theraot

31,890
5
57
86

Would using parseInt() be better than using Number()? – Chizbe Joe Sep 29 '16 at 18:04
@ChizbeJoe `Number` is perfectly fine. Just consider how you may handle non numeric values. Aside: the reason why I put the radix (10) is because not including it lets the browser / platform choose radix. See [parseInt at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt). – Theraot Sep 29 '16 at 18:17

score 2 · Accepted Answer · answered Sep 29 '16 at 17:52

2

Javascript detect string, you should use parseInt values, try this code:

(function() {
  var meter = document.getElementById('somemeter');
  var Likes = document.getElementById('likes');
  var Dislikes = document.getElementById('dislikes');

  meter.max = parseInt(Likes.innerHTML) + parseInt(Dislikes.innerHTML);
  meter.value = parseInt(Likes.innerHTML) - parseInt(Dislikes.innerHTML);
  
  console.log(meter.max)
})();

<div id="likes">500</div>
<div id="dislikes">50</div>
<meter value="10" min="0" max="1000" id="somemeter"></meter>

answered Sep 29 '16 at 17:52

CMedina

4,034
3
24
39

Would using parseInt() be better than using Number()? – Chizbe Joe Sep 29 '16 at 18:03
http://stackoverflow.com/questions/4090518/what-is-the-difference-between-parseint-and-number – CMedina Sep 29 '16 at 18:04

score 0 · Answer 3 · answered Sep 29 '16 at 17:55

0

You need to convert the strings to numeric values for the math to work:

(function() {
  var meter = document.getElementById('somemeter');
  var Likes = document.getElementById('likes');
  var Dislikes = document.getElementById('dislikes');

  meter.max = Number(Likes.innerHTML) + Number(Dislikes.innerHTML);
  meter.value = Number(Likes.innerHTML) - Number(Dislikes.innerHTML);
})();

Fiddle

answered Sep 29 '16 at 17:55

tragicrock

126
1
4

Thanks dude! I assumed it would work the other way because meter.value worked when I did it the other way. – Chizbe Joe Sep 29 '16 at 18:02

Why isn't this meter working?

3 Answers3