CODEWITHSUNDEEP
javascriptjqueryhtmlmeter
Chizbe Joe
Chizbe Joe

Reputation: 35

Why isn't this meter working?

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?

Upvotes: 1

Views: 118

Answers (3)

tragicrock
tragicrock

Reputation: 136

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

Upvotes: 0

CMedina
CMedina

Reputation: 4222

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>

Upvotes: 2

Theraot
Theraot

Reputation: 40170

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>

Upvotes: 3

Related Questions