CODEWITHSUNDEEP
javascriptgoogle-chrome
S.Faraji
S.Faraji

Reputation: 87

my javascript doesn't work in chrome

I have a java script witch is work correctly in Firefox and IE,but it doesn't work in chrome! I wanna to when i click on the button it shows me the table.If i use chrome and click on that it loads table,but i can't see whole table because its scroll doesn't work correctly. this is my script:

function toggle_it(itemID) {
    if ((document.getElementById(itemID).style.display == 'none'))
    {
        document.getElementById(itemID).style.display = 'inline';
    } else {
        document.getElementById(itemID).style.display = 'none';
    }
}

<tr class="query-box">
    <td width="30%">&nbsp;</td>
    <td><p align=right><a href="#" onClick="toggle_it('mytable id')"><img border="0" 
                                                                          src="mypicbutton.gif">&nbsp;More...</a>&nbsp;</p></td>
</tr>

Upvotes: 1

Views: 1464

Answers (2)

HBP
HBP

Reputation: 16033

I suspect the problem is the value returned by Chrome for style.display. Try the following:

function toggleIt (id) {
  var el = document.getElementById (id);
  el.style.display = el.style.display == 'none' ? '' : 'none';
}

By testing for equality to none this code should work regardless of the initial value of style.display

Upvotes: 0

icktoofay
icktoofay

Reputation: 129001

You're setting the table's display to inline, but that's not the normal display for tables; the normal is table. However, to make your toggle_it work on any kind of element, set it to '', which will make it act as if you hadn't set a display at all, falling back to the default display for whatever kind of element it is:

function toggleIt(id) {
    var element = document.getElementById(id);
    if(element.style.display === 'none') {
        element.style.display = '';
    }else{
        element.style.display = 'none';
    }
}

As you can see, I also cleaned up the code a bit in other ways as well.

Upvotes: 3

Related Questions