numeric value from html being read as a string

Question

I've simplified my code here to show that I have a value which is passed in to "mydiv1" which is always a number. I would like to be able to reference this to perform actions depending on whether it's negative or positive, but it must be being seen as a string. Is there any way this value can be got as a number? All topics i've seen such as parseInt() seem to relate to when a variable is specified rather than got from the html.

<html>
<head>
<script type="text/javascript">
    function myFunction() {
        var firstDivContent = document.getElementById('mydiv1');
      //  var firstDivContent =  "23";
        if (firstDivContent > 0) {
            alert('positive')
        }
        else if (firstDivContent < 0) {
            alert ('negative')
        }
    }
</script>
</head>
<body onload="myFunction();">
<div id="mydiv1">23</div>
</body>
</html>

*"All topics i've seen such as parseInt() seem to relate to when a variable is specified rather than got from the html."* Right. You get it from the HTML and the parse it (using `parseInt` or the unary `+` or `Number` or `parseFloat`...). E.g.: `var firstDivContent = Number(document.getElementById("mydiv1").innerHTML;` — T.J. Crowder, Oct 16 '17 at 14:13
`document.getElementById` returns the whole element: `
23
`. Not just its contents. This will always be `> 0`, if the element exits. — Cerbrus, Oct 16 '17 at 14:14
What you are doing right there is getting the actual div elemtn, not the value inside the the div tags. what you need to do is call the "parseint()" method on firstDivContent.innerHTML — Mathias Rønnow Nørtoft, Oct 16 '17 at 14:14

Marco · Accepted Answer · 2017-10-16T14:17:35.570

2

<html>
<head>
<script type="text/javascript">
    function myFunction() {
        var firstDivContent = document.getElementById('mydiv1');
        firstDivContent = parseFloat(firstDivContent.innerHTML);
        if (firstDivContent > 0) {
            alert('positive')
        }
        else if (firstDivContent < 0) {
            alert ('negative')
        }
    }
</script>
</head>
<body onload="myFunction();">
<div id="mydiv1">23</div>
</body>
</html>

Use innerHTML to get the HTML content of a div and then use parseFloat to convert the string to a number.

edited Oct 16 '17 at 14:17

answered Oct 16 '17 at 14:14

Marco

7,007
2
19
49

1

parseInt would only work for integer, the question deals with numbers, it would probably better to use the Number(myVar) form – laurent Oct 16 '17 at 14:15
@laurent You are right, I edited my answer accordingly. – Marco Oct 16 '17 at 14:17
You should add some code for having type safety here. firstDivContent can result in NaN here as well, if #mydiv1 contains crap. – iquellis Oct 16 '17 at 14:19

score 1 · Answer 2 · answered Oct 16 '17 at 14:15

You should get the innerHTML of your element. Then you can use parseInt() or +yourVar to convert the string to a number

var firstDivContent = +(document.getElementById('mydiv1').innerHTML);
if (firstDivContent > 0) {
  alert('positive')
} else if (firstDivContent < 0) {
  alert('negative')
}

<div id="mydiv1">23</div>

score -1 · Answer 3 · edited Dec 04 '19 at 17:50

-1

I prefer to use the "+" operator to make the cast to number more cleanly, in this demo, you can test it:

function myFunction() {
        var firstDivContent = document.getElementById('mydiv1');
      //  var firstDivContent =  "23";
        if (firstDivContent > 0) {
            alert('positive')
        }
        else if (firstDivContent < 0) {
            alert ('negative')
        }
    }

edited Dec 04 '19 at 17:50

marc_s

732,580
175
1,330
1,459

answered Oct 16 '17 at 14:19

Álvaro Touzón

1,247
1
8
21

numeric value from html being read as a string

3 Answers3