非常不寻常的JavaScript行为

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

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

我认为display =“none”的反面是display =“inline”或display =“block”，具体取决于你希望它出现的方式

Answer 4

我没有看到您编写的代码有任何特别的错误，但您可能想尝试在show函数上将display设置为'block'。

Answer 5

我打赌啤酒有两个ID为“工具提示”的元素。

Answer 6

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 7

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 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.