-
OnClick and HREF
Hi, I am searching for an answer to a similar problem to Javascript not Working Correctly with OnClick and HREF. I have very simple javascript code but the onclick function is never called.
In the header of my index.html I have
Code:
<head>
<script type="text/javascript">
function togglehide(var ID)
{
var item = document.getElementById(ID);
if (item)
{
item.className=(item.className=='invisible')?'shown':'invisible';
}
}
function article_more(var bodyId, var moreId, var lessId)
{
togglehide(bodyId);
togglehide(moreId);
togglehide(lessId);
document.write("<br/>THIS IS A TEST.. DEBUG FUNCTION 1 A 3<br/>");
}
</script></head>
Then, in the body, I have this:
Code:
<div class='shown' id='cat1top1art2more'>
<a href='#' onclick='article_more( cat1top1art2, cat1top1art2more, cat1top1art2less );return false;'>(more...)</a>
</div>
<div class='invisible' id='cat1top1art2less'>
<a href='#' onclick='article_more( cat1top1art2, cat1top1art2more, cat1top1art2less );return false;'>(...less)</a>
</div>
<div class='invisible' id='cat1top1art2'>
<p>
block of text
</p>
</div>
and my css definitions are
Code:
.invisible
{
visibility: hidden;
}
.shown
{
visibility: visible;
}
My "(more...)" is displayed, but when I click on it, nothing happens. As you can see, I added a document.write() call to my function just to see if it ever goes there but that text is never written out.
I am completely baffled by this. I am not sure why the onclick function is never called.
-
Re: OnClick and HREF
-
Re: OnClick and HREF
Please don't post questions on other people's questions. Always start a new thread. Thanks!
Concerning your problem...There are two correct ways to implementing what you want.
Best way
Use the actual href to call the JavaScript. This way, no actual link is ever called.
Code:
<a href="javascript:myFunction();" ... >
Good way:
If you want a false return, don't do it within the event. It must be done in the function itself.
Code:
<script type="text/javascript">
function myFunction() {
return false;
}
</script>
<a ... onclick="return myFunction();" ... >
-
Re: OnClick and HREF
Hi, thank you for your reply. I am sorry about the way I posted my question. :blush:
I changed my code and put the function call inside the href but when I click the link nothing seems to happen.
Code:
<div class='shown' id='cat1top1art2more'>
<a href='javascript: article_more( "cat1top1art2", "cat1top1art2more", "cat1top1art2less" );'>(more...)</a>
</div>
<div class='invisible' id='cat1top1art2less'>
<a href='javascript:article_more( "cat1top1art2", "cat1top1art2more", "cat1top1art2less" );'>(...less)</a>
</div>
<div class='invisible' id='cat1top1art2'>
<p>
block of text
</p>
</div>
at this point I just want the make sure the function is getting called. So I put an alert() inside my function. But when I click the link, the alert() never shows.
Code:
<head>
<script type="text/javascript">
function article_more(var bodyId, var moreId, var lessId)
{
alert("THIS IS A TEST.. DEBUG FUNCTION article_more");
// togglehide(bodyId);
// togglehide(moreId);
// togglehide(lessId);
}
</script>
</head>
I also tried removing the parameters just incase passing strings was somehow causing the issue. So I made a new function with no parameters that only calls alert():
Code:
<head>
<script type="text/javascript">
function call_alert()
{
alert("THIS IS A TEST.. DEBUG FUNCTION");
}
</script>
</head>
and I changed my href to this:
Code:
<div class='shown' id='cat1top1art2more'>
<a href='javascript:call_alert();'>(more...)</a>
</div>
<div class='invisible' id='cat1top1art2less'>
<a href='javascript:call_alert();'>(...less)</a>
</div>
<div class='invisible' id='cat1top1art2'>
<p>
block of text
</p>
</div>
Still nothing happens when I click the link. If this code works for other people, then maybe it is my browser? I have tested on Google Chrome 5.0.375.70 and IE 8.0.7600.16385 on Windows 7 Home Premium 64 bit.
Thanks,
-
Re: OnClick and HREF
Get rid of the vars in function parameters. You clearly have errors then. Have you even looked at Firefox's or Safari's Error Console?
