Using "onclick" within external JS file

[mikemedia]

I am creating a dynamic menu using CSS pseudo elements, and an external js file.

My problem is creating an “onclick” event.

I am using the js file in order to keep my menu independent of individual pages, thus enabling me to effect any future edits site-wide. My initial attempt was:

document.write('<dt onclick="javascript:expand('smenu3');">MENUITEM</dt>');

in which the onclick event triggered the function written at the beginning of the JavaScript file.

Of course, when I use the HTML

<dt onclick="javascript:expand('smenu3');">MENUITEM</dt>

in each page, it works flawlessly but I am then once again stuck with all menu items listed within each and every page which is unacceptable.

I have also tried this:

Identifying ‘smenu3’ as follows:

document.write('<dd id="smenu3">');

and having the onclick command written at the beginning of the js file under the function ‘expand’

onclick=expand('smenu3');

I’m sure there is a work-around, I simply have been banging on the problem too long and can’t step back to see it.

Please help.

 

[theniteowl]

I do not see what the problem is from your above post.
You can put the menu code all in the one file and just include it on the page so each page of the site has the one include statement keeping all of your menu code independent and updateable in one location.
In what way is it failing?

Show your menu code and how/where you include it into the page.
Remember that if you do the include in your head tags you do not yet have a body tag instantiated and so probably do not want to be writing page elements directly out at that point in your code. They should not be written until the body has been set.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[mikemedia]

>You can put the menu code all in the one file
A js file?

>include statement
From the HTML document to the JS, or some other type?

Below is the actual (convoluted) code
-------The Function In JS File-----

window.onload=expand;
function expand(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

------Am Using document.write()in same js file to create the HTML e.g.
document.write('<dt onclick="javascript:expand('smenu2');">RECRUITS & FAMILY</dt>');
document.write('<dd id="smenu2">');
document.write('<ul>');
document.write('<li><a href="../faq.htm">GRADUATION DATES</a></li>');
document.write('<li><a href="../grad_dates.htm">FAQs</a></li>');

 

[theniteowl]

See that is where you might be having trouble because you are using document.write to create your menu HTML code but probably before the BODY tag of the page has been rendered.

Try putting your document.write statements inside a function and call that function in an onload event prior to calling the expand() function. This way the entire page is rendered before the .js code is executed, then the menu is rendered on the page, then the expand function does it's business.

Another issue might be that you use window.onload=expand;
to call the expand function but that function requires an ID so it knows which element to act on and you are not passing it a value in your window.onload event.

Why would you want to automatically expand a part of the menu when the page loads?


It's hard to think outside the box when I'm trapped in a cubicle.

 

[theniteowl]

Another thing. When you include a .js file do not include any opening and closing script tags inside the .js file.
Use a line like this to do the include.

<script src="myfile.js" type="text/javascript"></script>

It's hard to think outside the box when I'm trapped in a cubicle.

 

[mikemedia]

>See that is where you might be having trouble because you are using document.write to create your menu HTML code but probably before the BODY tag of the page has been rendered.

No, no. Everything is rendering fine.

The window.onload=expand; is just for development testing (sorry)

I'm simply searching for a way to expand the menu with an onclick event.

 

[theniteowl]

So all you should have to do is to wrap your document.write statements into a function inside your .js file and call that function with an onload event. So the page will load and render, onload will execute which calls the function to create your menu.



It's hard to think outside the box when I'm trapped in a cubicle.