javascript - Trying to set a variable using document.getElementById('').innerHTML - Stack Overflow

I am utterly new to JavaScript and am trying to self-learn a few things - so be gentle.

I am trying to set a variable using document.getElementById(' ').innerHTML but I can't get it to work - I just get "undefined" returned when I try to use this variable.

All of the examples I have seen says that this should work, but it isn't and I'm at my wits' end. Any help will be greatly appreciated.

This is the code...

<script>
var str = document.getElementById('str').innerHTML;

function calc()
{
  if(document.getElementById('checkbox').checked)
     document.getElementById('str').innerHTML = str ;     
  else
     document.getElementById('str').innerHTML='unchecked';
}

</script>

Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>

My ultimate aim is to add a number to the variable "str" using another variable; so something like...

var str = document.getElementById('str').innerHTML;
var add = 2
function calc()
{
  if(document.getElementById('checkbox').checked)
     document.getElementById('str').innerHTML = str + add;     
  else
     document.getElementById('str').innerHTML='unchecked';
}

I'm aware that I probably need to parse the str variable as an integer for this, but I've stumbled before I've even got that far.

Please help.

I am utterly new to JavaScript and am trying to self-learn a few things - so be gentle.

I am trying to set a variable using document.getElementById(' ').innerHTML but I can't get it to work - I just get "undefined" returned when I try to use this variable.

All of the examples I have seen says that this should work, but it isn't and I'm at my wits' end. Any help will be greatly appreciated.

This is the code...

<script>
var str = document.getElementById('str').innerHTML;

function calc()
{
  if(document.getElementById('checkbox').checked)
     document.getElementById('str').innerHTML = str ;     
  else
     document.getElementById('str').innerHTML='unchecked';
}

</script>

Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>

My ultimate aim is to add a number to the variable "str" using another variable; so something like...

var str = document.getElementById('str').innerHTML;
var add = 2
function calc()
{
  if(document.getElementById('checkbox').checked)
     document.getElementById('str').innerHTML = str + add;     
  else
     document.getElementById('str').innerHTML='unchecked';
}

I'm aware that I probably need to parse the str variable as an integer for this, but I've stumbled before I've even got that far.

Please help.

• javascript
• html

Share Follow edited Sep 13, 2013 at 17:30 gen_Eric 227k4242 gold badges303303 silver badges342342 bronze badges asked Sep 13, 2013 at 17:24 user2777332user2777332 10522 silver badges66 bronze badges 3

• 4 The element doesn't exist yet. – SLaks Commented Sep 13, 2013 at 17:26
• 1 Put the script after the HTML – Niccolò Campolungo Commented Sep 13, 2013 at 17:26
• 2 Does your page look exactly like that? Because when your JavaScript runs, str doesn't yet exist. You need to put the JavaScript after the element, or put it inside a window.onload = function(){}. – gen_Eric Commented Sep 13, 2013 at 17:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The value of str is determined when the page is loading (and before the element exists). I believe you want it inside calc:

function calc()
{
  var span = document.getElementById('str');
  var str = span.innerHTML;
  var add = 2;
  if(document.getElementById('checkbox').checked)
     span.innerHTML = str + add;     
  else
     span.innerHTML = 'unchecked';
}

The problem is that your span is below the script and actually str is not still there. Here is an example which works http://jsfiddle/krasimir/2C25E/

<script>
function calc() {
    var str = document.getElementById('str').innerHTML;
    var add = 2;
    if(document.getElementById('checkbox').checked)
        document.getElementById('str').innerHTML = parseInt(str) + add;     
    else
        document.getElementById('str').innerHTML='unchecked';
}
</script>

Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>

Also you should use parseInt to be sure that you get a Number and not a String.

if you had included the script in side the <head>tag This will work for you.

function calc() {

var str = document.getElementById('str').innerHTML;
//more code

Try this, a working version and a bit optimised:

var str = document.getElementById('str');
var chk = document.getElementById('checkbox');
var add = 2
    function calc() {
        chk.checked ? str.innerHTML = parseInt(str.innerHTML) + add : str.innerHTML = 6;
    }
chk.onchange = function () {
    calc();
};

Demo here