CODEWITHSUNDEEP
javascript
ant
ant

Reputation: 22948

Very unusual JavaScript behaviour

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';
}

Upvotes: 1

Views: 296

Answers (11)

Paul Fedory
Paul Fedory

Reputation: 307

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.

Upvotes: 0

Chris Dale
Chris Dale

Reputation: 2222

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.

Upvotes: 0

user160820
user160820

Reputation: 15200

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.

Upvotes: 0

Timothy S. Van Haren
Timothy S. Van Haren

Reputation: 8966

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);

Upvotes: 4

Abgan
Abgan

Reputation: 3716

  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.

Upvotes: 0

Pekka
Pekka

Reputation: 449395

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

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129792

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.

Upvotes: 0

GSto
GSto

Reputation: 42350

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.

Upvotes: 1

jbrass
jbrass

Reputation: 941

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

Upvotes: 1

Jauco
Jauco

Reputation: 1319

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

Upvotes: 2

Senior Coconut
Senior Coconut

Reputation: 21

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>

Upvotes: -1

Related Questions