Very unusual JavaScript behaviour

Question

Here is something that I've used for ages now and all of the sudden I get these strange behaviours, maybe someone knows the reason why? Here is my HTML:

<div class="tooltip" id="tooltip"></div>

<input type="button" name="hide" value="hide" onclick="hide('tooltip');" />
<input type="button" name="show" value="show" onclick="show('tooltip');" />

Here is the JavaScript below the HTML code:

    <script type="text/javascript">
        function hide(id)
        {
            document.getElementById(id).style.display = 'none';
        }
        function show(id)
        {
            document.getElementById(id).style.display = '';
        }
    </script>

Now there shouldn't be anything wrong with this code. It should hide or show tooltip on each button click. Now the weird thing going on is when I click on the hide button it hides itself, and when I click on show nothing happens. Hide is still hidden.

Did anyone have similar problem? Is there a work-around for it? Maybe another approach for accomplishing the same thing (pure JavaScript)?

UPDATE: Changed it to block, still isn't working. I mean why would it hide the button I'm clicking on when there is no connection to that whatsoever? I'm using latest Firefox by the way. And I added alert in the function same thing. Here is re-written code:

function hide(id)
{
    alert(id);
    document.getElementById(id).style.display = 'none';
}
function show(id)
{
    alert(id);
    document.getElementById(id).style.display = 'block';
}

Answer 1

You need to set the display type back to block:

<script type="text/javascript">

              function hide(id)
              {
              document.getElementById(id).style.display = 'none';
              }
              function show(id)
              {
              document.getElementById(id).style.display = 'block';                
              }

    </script>

Answer 2

Works perfectly fine when I copy paste your code and load it in google chrome. You probably have a typo in the original page.

Answer 3

I believe the opposite of display="none" would be display="inline" or display="block" depending on how you want it to show up

Answer 4

I don't see anything particularly wrong with the code you have written, but you might want to try setting display to 'block' on the show function.

Answer 5

There doesn't seem to be anything obvious that would make this not work properly. I'm guessing that there is some kind of typo, unclosed tag or function, etc. Try adding an alert() to both functions to see if the functions are even being called properly.

EDIT: Based on your latest edit to the question, I'm leaning toward there being another item on the page with the same ID. See this question.

One other thing to try: in your show function, after setting the display property, try doing an alert on the display property to see what it was actually set to:

alert(document.getElementById(id).style.display);

Answer 6

You probably want to switch to 'block', when showing it, as others have remarked. Other than that, if it is hidden by default, it has to be hidden by inline styles. If you hide it with code placed in an external css file, you will not be able to show it again with javascript.

Answer 7

I'd bet a beer that there are two elements with the ID "tooltip".

Answer 8

1. Check that display='block' thing - maybe your css specifies display='none' for class .tooltip?

2. Test your code using alert(), or use some debugger and set breakpoint in the show() function.

Answer 9

I think your Code is working. But your tooptip DIV has nothing in it that is why you feel that the DIV is not displayed.

Just Write something in your DIV.

And the secod part, I mean By clicking hide button heides itself. It seems to be impossible as in your code seems.

Answer 10

Since you're using Firefox you can check Firefox's 'Error Message console'. Open up Tools and choose it from there. From here you can see where your JavaScript fails, if it fails.

Answer 11

You could try putting semicolons on the end of the function blocks, just after the closing brace.

I found that without them, my functions weren't working correctly and had very unusual behaviour.