Reputation: 328

javascript "onclick" event fails just in Chrome

I'm correcting a webpage which has a bug, and I detected where is it, but I don't know the basis.

This js works perfect in Firefox and explorer, but not in Chrome.

So, here we go:

--HTML--

<div id='mesa' onclick='gotoSection( mesa  )' >

--JAVASCRIPT--

<script type="text/javascript"> 
    function gotoSection( section ){
        alert( section );
        $( '#section_container div' ).css( "display" , "none" );
        $( section ).css( "display" , "block" );
    }
</script>

So, in Firefox, the alert says "[object HTMLDivElement]", but in Chrome the alert says "undefined".

Upvotes: 0

Answers (4)

Denys Séguret

Reputation: 382150

Change

<div id='mesa' onclick='gotoSection( mesa  )' >

<div id='mesa' onclick='gotoSection( this  )' >

Note that when using jQuery, this would have been more idiomatic (it requires the element to be defined before you execute this line of code) :

$('#mesa').on('click', gotoSection);

EDIT :

Following your comment it's obvious now that your bug is that you gave the same id to more than one element. It's illegal and there's no guarantee, whatever the browser, on which element you will get using $('#mesa').

Here's for example a solution :

<div id=mesaOpener> ... </div>
<div id=anotherDivOpener> ... </div>

 <div id=mesa> ... </div>
<div id=anotherDiv> ... </div>

<script type="text/javascript">
  $(function(){
    $('[id$=Opener]').on('click', function(){
        $('#section_container div' ).hide();
        $('#'+this.id.slice(0,4)).show();
    });
  });
</script>

Clicking on <somename>Opener shows the div <somename>.

Upvotes: 3

bokks

Reputation: 44

$(section) - section can be a string(id selector) or valid dom object. IE and Firefox have an interesting quirk : You can directly use id as the js reference to the dom object without explicit getElementById - for eg. mesa here refers to the div object.

Chrome/Safari donot support this.

Upvotes: 0