Javascript onclick function not working on HTML heading

Question

I want onclick to trigger when clicked on HTML heading as shown in code below.

<h2 class="title" onclick="viewPost('<?php echo $pageLink; ?>', '<?php echo $tabLink; ?>');">
<?php echo $menuItem["ContentMenu"]['title']; ?>
</h2>

My javascript function is as follows

<script>
function viewPost(pageLink,tabLink){
   //do something
    }
</script>

My problem is onclick works fine when it is in HTML link

<a href="#foo" onclick="viewPost('<?php echo $pageLink; ?>', '<?php echo $tabLink; ?>');" > 

but it does not work in HTML heading. Please help.

Answer 1

Have you checked that the generated HTML/Javascript is valid. This works fine for me

<h1 onclick="alert('Hello');">A heading</h1>
<p>Some text</p>

See http://jsfiddle.net/2S56N/ for a demo

Answer 2

Better use jquery than javascript, Can I have onClick() event for <h1> to <h6> tags?

$('h2').click(function(){
   //do something on click
});

and also I tried your code with some modifications(below) and it works fine

<script>
function viewPost(pageLink,tabLink){
alert(pageLink);
}
</script>
<?php
$tabLink = 1;
$pageLink = 2;
?>
<h2 class="title" onclick="viewPost('<?php echo $pageLink; ?>', '<?php echo $tabLink;     ?>');">click</h2>

Answer 3

Try This I test it and its work fine:

<script>
function viewPost(pageLink,tabLink){
    alert("pageLink is" + pageLink +"tabLink is "+tabLink);
 }
</script>


<h2 class="title" onclick="viewPost('<?php echo 'testLink'; ?>', '<?php echo 'tabLink'; ?>');">
Click me
</h2>

<a href="#foo" onclick="viewPost('<?php echo 'testLink'; ?>', '<?php echo 'tabLink'; ?>');" > Click me</a>