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.
5 answers
solution1
42 ACCPTED 2014-01-06 00:41:38
The onclick property is all lower-case, and accepts a function , not a string.
document.getElementById("test").onclick = foo2;
See also addEventListener .
solution2
14 2017-12-18 21:50:33
In JavaScript functions are objects.
document.getElementById('foo').onclick = function(){
prompt('Hello world');
}
solution3
3 2014-11-30 13:40:57
window.onload = prepareButton;
function prepareButton()
{
document.getElementById('foo').onclick = function()
{
alert('you clicked me');
}
}
<input id="foo" value="Click Me!" type="button" />
solution4
2 2019-11-28 15:59:31
Perhaps you might want to use "addEventListener"
document.getElementById("test").addEventListener('click',function ()
{
foo2();
} );
Hope it's still useful for you
solution5
-1 2020-06-07 15:33:58
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 -> onclick.</li>
<li id="demo1">Click me -> click event.</li>
<li onclick="myFunction('YOU CLICKED ME!')">Click me calling function.</li>
</ul>
<div id="myresult"> </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 '
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.