JavaScript - document.getElementByID with onClick

Question

I'm trying to code a simple game in an HTML document just for fun. In it, there is an image which adds to your score when clicked.

I created a simple if statement within the score-adding function which should change the image and what its onClick value is...

if (foo == 1) {
    document.getElementById("test").src = "images/test2.png";
    document.getElementById("test").onClick = "foo2()";
}

...but it doesn't work. The image will be successfully changed, but the actual onClick remains the same. Checking the console, it throws no errors, either.

score 54 · Accepted Answer · answered Jan 06 '14 at 00:41

54

The onclick property is all lower-case, and accepts a function, not a string.

document.getElementById("test").onclick = foo2;

See also addEventListener.

answered Jan 06 '14 at 00:41

Quentin

914,110
126
1,211
1,335

score 17 · Answer 2 · edited Apr 15 '18 at 15:31

17

In JavaScript functions are objects.

document.getElementById('foo').onclick = function(){
    prompt('Hello world');
}

edited Apr 15 '18 at 15:31

Marco

155
1
4

answered Dec 18 '17 at 21:50

Who iscoo

303
2
12

score 6 · Answer 3 · answered Nov 28 '19 at 15:59

6

Perhaps you might want to use "addEventListener"

document.getElementById("test").addEventListener('click',function ()
{
    foo2();
   }  );

Hope it's still useful for you

answered Nov 28 '19 at 15:59

Manuel Castillo

371
4
4

score 3 · Answer 4 · edited Mar 24 '17 at 23:15

3

window.onload = prepareButton;

function prepareButton()
{ 
   document.getElementById('foo').onclick = function()
   {
       alert('you clicked me');
   }
}

<input id="foo" value="Click Me!" type="button" />

edited Mar 24 '17 at 23:15

DinoMyte

8,737
1
19
26

answered Nov 30 '14 at 13:40

iftkhar

31
2

score -1 · Answer 5 · answered Jun 07 '20 at 15:33

Sometimes JavaScript is not activated. Try something like:

<!DOCTYPE html>
<html>
  <head>

    <script type="text/javascript"> <!--
      function jActivator() {
        document.getElementById("demo").onclick = function() {myFunction()};
        document.getElementById("demo1").addEventListener("click", myFunction);
        }
      function myFunction( s ) {
        document.getElementById("myresult").innerHTML = s;
        }
    // --> </script>
    <noscript>JavaScript deactivated.</noscript>
    <style type="text/css">
    </style>
  </head>
  <body onload="jActivator()">
    <ul>
      <li id="demo">Click me -&gt; onclick.</li>
      <li id="demo1">Click me -&gt; click event.</li>
      <li onclick="myFunction('YOU CLICKED ME!')">Click me calling function.</li>
    </ul>
    <div id="myresult">&nbsp;</div>
  </body>
</html>

If you use the code inside a page, where no access to is possible, remove and tags and try to use 'onload=()' in a picture inside the image tag '

JavaScript - document.getElementByID with onClick

5 Answers5

Linked