onclick event will not fire on first click with conditisional statement

StackOverflow https://stackoverflow.com/questions/23229464

Question

This is most strange.

First: I suspect it has to do with my machine.

My problem is simple, I cannot get a conditional stamen to fire on first click. after the first click all is fine and works as should. This is only true for what I am writing recently, all my old files with similar statements work fine and can copy and paste from 3schools with no problems.

If I remove the conditional statement things works as expected, for example if I put the single statement in the tag onclick event it works on first click and is also true for a simple function but not the conditional statement. I have test code below though I am not sure if it will help as I know the code work and think that the first click finds the function but doesn't fire it. As the code shows I have tried a couple of events with the same results.

    <script type="text/javascript">
        function test() {
            var test=document.getElementById('test');
            if (test.style.visibility=="visible") {
                alert("yes");       
            }
            else {
                test.style.visibility="visible";
            }
        }
    </script>
</head>
<body>
    <h1 id="test">Hello World You dumbass!</h1>
    <button type="button" onmouseup="test()">test</button>
    <input type="button" onclick="test()" value="text">

Something is having a bad hair day and I am not finding it. Any thoughts that are intelligent would be most appreciated, and verification that the coding is doing the same for others would also help. I am wounding if it might have to do with text encoding on my machine, though all works everywhere else code can have strang results if some sort of text formatting gets applied like writing code in MS Word.

Thanks

The answer below hit the nail on the head or returns true. To make this work without a declared style in the tag the condition is written like this

<script type="text/javascript">
        function test() {
            var test=document.getElementById('test');
            if (test.style.visibility=="") {
                test.style.visibility="hidden";     
            }
            else {
                test.style.visibility="";
            }
        }
    </script>
</head>
<body>
    <h1 id="test">Hello World You dumbass!</h1>
    <button type="button" onmouseup="test()">test</button>
    <input type="button" onclick="test()" value="text">

I should of caught this but that's what one get when they assume, just as I assumed that because the style was declared in the head that the attribute carried over to the element, it doesn't. hope this helps someone avoid the headache I just went through.

Was it helpful?

Solution

If you debug your function, you will find that test.style.visibility on first run is nothing as this css property is not set to anything for your element initially. As a result, your first run goes into your else and then sets this property. Now, since you have set the value to "visible" in the first run, every subsequent run alerts.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top