/    Sign up×
Community /Pin to ProfileBookmark

Unable to set buttons’ onClick event within script

Copy linkTweet thisAlerts:
Sep 02.2006

I apologise for what seems to be a simplistic problem, hopefully with a simplistic solution. I have written an image gallery script with 3 functions – one for 3 separate events as follows:

[code=php]<body onload=”loadnum()”>
<input type=”button” name=”previous” value=”Previous image” onclick=”goback()”>
<input type=”button” name=”next” value=”Next image” onclick=”advance()”>[/code]

But now I have decided to register event handlers to these elements within the script. I am using Internet Explorer 6.
I have tried test after test, searched this forum, tried the addEventListener() method and the attachEvent() method but I have only had success with the document and window objects. I cannot set onclick or any other events with any of their properties or collections – images[], form.elements[] etc.

In other words, this works for me:

[code=php]document.onclick=dosomething;[/code]

However none of these approachs will work for me:

[code=php]document.getElementById(‘imgnum’).onclick=function(){alert(‘event added’);};
document.form1.next.onclick=advance;
document.form1.elements(‘next’).onclick=advance;[/code]

Could someone please point out where I have gone wrong or post a code that is sure to work?

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzSep 02.2006 — We need to see more of your code.

I suspect you may be trying to access elements before the DOM has finished loading.

IE doesn't support DOM2 Events, which include addEventListener(). Other browsers, including Firefox, Netscape 6+, Opera 7+, and Safari do support DOM2 Events.
Copy linkTweet thisAlerts:
@TweekedJDauthorSep 02.2006 — This should be all that's necessary to make sense of my gibberish.

[code=php]function newposition(msg,imgname,imgsource)
{
document.getElementById("imgnum").innerHTML=msg
document.getElementById("imageswitch").name=imgname
document.getElementById("imageswitch").src=imgsource
}

function loadnum()
{
document.getElementById("imageswitch").src=pic1.src
document.controls.previous.disabled=true
document.getElementById("imgnum").innerHTML="01/" + max
}

function advance()
{
var str= document.getElementById("imageswitch").name
var splitted = str.split("c")
var incnum = (splitted[1]*1 + 1)
nextimage = "pic" + incnum
nextsource = eval("pic" + incnum + ".src")

if (incnum==total)
{document.controls.next.disabled=true}

if (incnum<10) posfwd="0"+incnum
else{var posfwd = incnum;}
var postxt= posfwd + "/" + max

document.controls.previous.disabled=false
newposition(postxt,nextimage,nextsource)
}
.....
// THIS IS WHERE I ATTEMPTED TO INSERT THE EVENT HANDLING CODE
[/code]
However, the problems also arises when I tested on the most basic of pages/scripts. I can access the onclick event for the document but not for the objects contained within it.
Copy linkTweet thisAlerts:
@KravvitzSep 02.2006 — Remove this: onload="loadnum()"

Add this:
window.onload = function() {
loadnum()
document.getElementById('imgnum').onclick=function(){alert('event added');};
document.form1.next.onclick=advance;
}
Copy linkTweet thisAlerts:
@TweekedJDauthorSep 02.2006 — Thanks Kravvitz. I should have been clearer though.

This was only an example to illustrate what approachs I had tried:
[code=php]document.getElementById('imgnum').onclick=function(){alert('event added');};[/code]
The loadnum() function works onload but I still can't seem to solve my original problem - I can't set the event handlers for the objects within the document.
Copy linkTweet thisAlerts:
@CharlesSep 03.2006 — Try posting the URL so we can see what it is that you are doing. I suspect that Kravvitz is correct.
Copy linkTweet thisAlerts:
@KravvitzSep 03.2006 — You'll need to show us the X/HTML for that page.
Copy linkTweet thisAlerts:
@TweekedJDauthorSep 03.2006 — OK, I will upload the page and a few sample images. I will leave the script as it was before I started this thread to make things more clear.
Copy linkTweet thisAlerts:
@TweekedJDauthorSep 03.2006 — Sorry about the delay but it was 1AM and my hosting had was temporarily inactive.

http://sdextreme.awardspace.com/gallery/mfindex.html

I'd be grateful if someone would edit that HTML so that the events are set within the script.
Copy linkTweet thisAlerts:
@KravvitzSep 06.2006 — Try this:
window.onload = function() {
loadnum()
document.getElementById('imgnum').onclick=function(){alert('event added');};
document.controls.previous.onclick=goback;
document.controls.next.onclick=advance;
}
×

Success!

Help @TweekedJD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...