/    Sign up×
Community /Pin to ProfileBookmark

Simple onClick script not working

Hi everyone,

I am getting stuck with an onClick function. I test for matching ‘id’s in the html document and when I have a match I want to attach the onClick function. In firebug I can see the match in the if statement is fine, the onClick function is attached to the element and I can watch it stay there through to the end of debug session. But when I click on the element, I get no love.

[CODE]window.onload = function() {
var level2List, level1List, level1ID, level2ID, eltToClick, eltToHide, eltAttributes, i, j;

level1List = document.getElementsByClassName(“level_1_menu”);
level2List = document.getElementsByClassName(“level_2_menu”);

for (i = 0; i < level1List.length; i++) {
level1ID = level1List[i].id;
for (j = 0; j < level2List.length; j++) {
level2ID = level2List[j].id;
if (level1ID == level2ID) {
eltToClick = level1List[i];
eltToHide = level2List[j];
eltToClick.onClick = function () {
alert(“Click!”);
}
}
}
}
}[/CODE]

Any help is greatly appreciated. ?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@KorOct 03.2011 — Your code presumes that you have two elements with the same[B] id[/B], which is HTML and JavaScript illegal. [I]The[B] id[/B] must be unique on document[/I].

You should re-organize your DOM structure with this rule in mind.
Copy linkTweet thisAlerts:
@khrysztovauthorOct 03.2011 — Thanks Kor.

I have scrapped that idea and I am now trying to just use one element to hide (and/or show) another.

in the window.onLoad = function() { i have
[CODE]showMenu('portfolio', 'level_2_menu');[/CODE]

and that calls this function:
[CODE]function showMenu(oTrigger, oHideShow){
var thisTrigger = document.getElementById(oTrigger);
thisTrigger.onClick = function() {
var thisShow = document.getElementById(oHideShow);
thisShow.style.display = 'none';
}

}[/CODE]


Any further help greatly appreciated, again.
Copy linkTweet thisAlerts:
@KorOct 03.2011 — I feel that you could do that easier... can you post the HTML code (or the relevant part of it), please? The elements with class level_1_menu and level_2_menu
Copy linkTweet thisAlerts:
@khrysztovauthorOct 03.2011 — The idea behind all of this is to create a complex menu with a horizontal component (level_1_menu) which then has a drop down on portfolio to a vertical menu system with level 3 nested into level 2. What I really need is to be able to click on portfolio and have the menu appear beneath it.

Here is the body of the html doc (links 'blurred' for client privacy)

[CODE]<body>

<ul>
<li class="level_1_menu" id="portfolio">portfolio</li>
<li class="level_1_menu" id="about">about</li>
<li class="level_1_menu" id="services">services</li>
<li class="level_1_menu" id="team">team</li>
<li class="level_1_menu" id="home">home</li>
</ul>

<div id="portfolio">
<ul class="level_2_menu" id="portfolio">
<li>Resource Projects
<ul class="level_3_menu">
<li><a href="someHref">EFIUIFIJSEOFIJSO</a></li>
<li><a href="someHref">oisfjdieurfisoijfoid</a></li>
<li><a href="someHref">dfsgkjndtlgindrtib</a></li>
<li><a href="someHref">svkdrsgoisrti</a></li>
<li><a href="someHref">zsrglfigtn raf;ijdsfgr</a></li>
<li><a href="someHref">sdvfkjndfsgndsknj</a></li>
</ul>
</li>
<li>Commercial Projects
<ul class="level_3_menu">
<li><a href="someHref">dvngvngnjkdr</a></li>
<li><a href="someHref">frffnfjifjfndsfj</a></li>
<li><a href="someHref">gsrtggdgf</a></li>
</ul>
</li>
<li>Industrial
<ul class="level_3_menu">
<li><a href="someHref">dsfgvtgdtf </a></li>
</ul>
</li>
<li>Food Processing
<ul class="level_3_menu">
<li><a href="someHref">sagfuknfdsvn vd knd</a></li>
</ul>
</li>
<li>Residential Projects
<ul class="level_3_menu">
<li><a href="someHref">sagfddsfg</a></li>
<li><a href="someHref">sdvdfvdxfbv</a></li>
</ul>
</li>
</ul>
</div>
</body>[/CODE]
×

Success!

Help @khrysztov 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...