-4

I am trying to get a number from a document.getElementById to be read as a real number in a if/else statement using a comparison operator (e.g.: points < 40). Below is an example of what I'm trying to accomplish using w3school's tool to assist.

I understand Javascript does certain things depending on the DataTypes, Operators, and Numbers. Below is the original code I started with, but I have tried different variations, see below with the datatype outcome commented to the right. I used arithmetic to find out what's going on with my element's id number when pulled into the variable and the best outcome is NaN.

How do I get a number within an HTML tag to be recognized by Javascript's document.getElementById script operators?

<!DOCTYPE html>
<html>
<body>

<span id="points">39</span> is <span id="outcome"></span>

<script>

    var points = document.getElementById("points"); // [object HTMLSpanElement]
    //var points = +document.getElementById("points"); // NaN
    //var points = parseInt(document.getElementById("points")); // NaN 
    //var points = Number(document.getElementById("points")); // NaN
    if (points < 40) {document.getElementById("outcome").innerHTML = "LESS THAN 40";}
    else {document.getElementById("outcome").innerHTML = "40 or GREATER";}

</script>

</body>
</html>

EDIT: All that was needed was a ".innerHTML" addition to my var (added before the semicolon).

FIXED CODE BELOW: 

<!DOCTYPE html>
<html>
<body>

<span id="points">39</span> is <span id="outcome"></span>

<script>

    var points = document.getElementById("points").innerHTML; // [object HTMLSpanElement]
    //var points = +document.getElementById("points"); // NaN
    //var points = parseInt(document.getElementById("points")); // NaN 
    //var points = Number(document.getElementById("points")); // NaN
    if (points < 40) {document.getElementById("outcome").innerHTML = "LESS THAN 40";}
    else {document.getElementById("outcome").innerHTML = "40 or GREATER";}

</script>

</body>
</html>
DanielT
  • 53
  • 9
  • 1
    An HTML element will never be a number. As you already showed, `document.getElementById("points"); // [object HTMLSpanElement]` you have a span, not a number. What you want is the `.value` or the `innerHTML` or the `innerText` of the span. – takendarkk Jan 29 '18 at 16:07
  • And then you should ideally `parseInt` what you get from `.value` – phuzi Jan 29 '18 at 16:10
  • Just use single quotes or escape them. – takendarkk Jan 29 '18 at 16:27
  • @csmckelvey - Adding .innerHTML to the end of my var points worked. Thank you. - If your reply was an answer I would up vote it... Btw, I asked in a comment I previously deleted how I can make the innerHTML of my else statement contain an HTML tag with quotes, hints csmckelvey's follow up comment, which worked: _.innerHTML = "Google It";}_ – DanielT Jan 29 '18 at 17:58
  • Hey Jarrod Roberson, Nkosi, Olaf, FrankerZ, Sotirios Delimanolis, can you remove your vote down on my post or take it off [hold]. A "-3" is a bit much right out the gate. I removed my extra thought processes/code and edit the title and body, leaving only the basic issue clearly stated. – DanielT Feb 01 '18 at 15:19

2 Answers2

3

  1. Get the element (you're doing that):

    var points = document.getElementById("points");

  2. Get the text of the element:

    var text = points.innerHTML; // or .textContent or .innerText

  3. Convert it to number in any of the various ways you can do that, such as parseInt:

    var num = parseInt(text, 10); // 10 = base 10 (decimal)
// or
var num = parseFloat(text);
// or
var num = +text;
// or
var num = Number(text);       // Just like the unary +

    My answer here goes into detail of the various options (parseInt, parseFloat, unary +, Number).

Then num contains the number.

You can, of course, combine the steps:

var num = +document.getElementById("points").innerHTML;
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks, I didn't try everything you first mentioned, but it sounds like it would work. However, I did try the combine steps on the original code (_var points_) and it worked, but simply adding _.innerHTML_ to the end worked. – DanielT Jan 29 '18 at 20:24
0

document.getElementById(...) returns a DOM Element, you'll have to access a property of that element to get the number. In this case, since you're dealing with a <span> element, you can use .textContent to get its text content.

Here is an example:

var x = parseInt(document.getElementById("points").textContent);
Titus
  • 22,031
  • 1
  • 23
  • 33
  • Thanks. This works as well, but simply adding _.innerHTML_ to the end of my original _var_ worked. – DanielT Jan 29 '18 at 20:25