'Can't make JavaScript work, is it an ID issue?

I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?

    <html>
    <head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
    </head>
    <body>
<div id="breaks">
    <a href="http://info" > <img src="homeicon.png" /> </a>
    <br>
    <br>
    <br>
    <br>
    <br>
<div id="appTable" style="float: left">
    <table border="0" id="appTable">
        <tr>
        <td>life calculator</td>
        </tr>
        <tr>
        <td>punny!</td>
        </tr>
        <tr>
        <td>drink roulette (on its way!)</td>
        </tr>
    </table>
</div>
<div id="arrowTable" style="float: left">
    <table border="0">
        <tr>
    <td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
        </tr>
        <tr>
        <td id="punnyButton"><img src="arrow1.png" width="45"/></td>
        </tr>
        <tr>
        <td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
        </tr>
    </table>
</div style="clear: both">
<div id="content">
    my  apps :)
</div>

And here's the JavaScript:

    var foo = document.getElementById('lifeCalculatorButton');
    foo.onClick = function (){
    document.getElementById('content').innerHTML = 'foo';
    };

javascript dom-events

Solution 1:^[1]

Try changing the onclick event to all lowercase.

var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
    document.getElementById('content').innerHTML = 'foo';
};

EDIT

The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.

<html>
  <head>
    <link rel="Stylesheet" type="text/css" href="apps.css" /> 
    <title>my apps</title>
  </head>
  <body>
    <div id="breaks">
      <a href="http://info"><img src="homeicon.png" /></a>
        <br /><br /><br /><br /><br />
    <div id="appTable" style="float: left">
      <table border="1" id="appTable">
        <tr><td>life calculator</td></tr>
        <tr><td>punny!</td></tr>
        <tr><td>drink roulette (on its way!)</td></tr>
      </table>
    </div>
    <div id="arrowTable" style="float: left">
      <table border="1">
        <tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
        <tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
        <tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
      </table>
    </div>
    <div id="content">
        my  apps :)
    </div>
  </body>
</html>
<script type="text/javascript">
  var foo = document.getElementById('lifeCalculatorButton')
  foo.onclick = function (){
  document.getElementById('content').innerHTML = 'foo';
  }; 
</script>

EDIT

If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.

window.onload = function () {
   var foo = document.getElementById('lifeCalculatorButton')
  foo.onclick = function (){
  document.getElementById('content').innerHTML = 'foo';
  }; 
};

Solution 2:^[2]

First, you seem to have a typo here:

<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>

The <img> tag is not closed properly.

You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:

window.onload = function () {
    var foo = document.getElementById("lifeCalculatorButton");
    // ...
};

Solution 3:^[3]

It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.

If you don't want to use jQuery your javascript looks ok as this fiddle works.

As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code

<script type='text/javascript'>//<![CDATA[ 
    window.onload=function(){
    var foo = document.getElementById('Clickable');
    foo.onclick = function (){
    alert("See It Works");    
  }; 
}//]]>

On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.

Solution 4:^[4]

Does it need to be the td that holds the id? Why not use an a tag to wrap around the image (and as suggested close the img tag correctly with />). Apply the onclick to the a tag and call a function with a return false afterwords to bypass normal behavior... and obviously, in your onclick you can call whatever function u want

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ates Goral
Solution 3	Jon P
Solution 4

'Can't make JavaScript work, is it an ID issue?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]