CODEWITHSUNDEEP
javascriptfunction
Andriy Haydash
Andriy Haydash

Reputation: 349

Javascript function executes only after second hover

I have got a small javascript function and a piece of html code where i have a button, and I want that whenever user hovers that button, a little box to appear.Everything seems to be working great,despite that my function executes only after I hover that button for the 2 time(after the page has just loaded and I try to use my function for the 1 time, later everything executes after a firs hover).So what can I do about it? HTML code 

<body>
<div id = "searchBox">
    <p id = "paragraph"><input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
    </p>
    <div id = "searchButton"><a href = "#" onmouseover="popUp('paragraph')">Szukaj</a></div>
</div>
</body>

and javascript itself

<script type = "text/javascript">
function popUp(menu){
    var searchBox = document.getElementById(menu).style;
    var searcButton = document.getElementById('searchButton');
    if(!searchBox || searchBox.display == "none"){
        searchBox.display = "block";
        }
    else {
        searchBox.display = "none";
    }
};
</script>

Upvotes: 0

Views: 216

Answers (2)

punund
punund

Reputation: 4421

<p> is a flow element and can't contain <input>s.

Besides, your function instructs to toggle hidden state, rather than show box on mouseover. Therefore, the box will hide on first hover, and reappear on the second one.

You probably want to define mouseover and mouseout event listeners.

Upvotes: 1

user1106925
user1106925

Reputation:

Change your if statement like this:

function popUp(menu) {
    var searchBox = document.getElementById(menu);
    var searcButton = document.getElementById('searchButton');
    if (searchBox) {
        if(searchBox.style.display == ""){
            searchBox.style.display = "block";
        }
        else {
            searchBox.style.display = "";
        }
    }
};

The original value will be "" instead of "none".

I'm making the assumption that the CSS setting is to display:"none".

I also moved the searchBox condition. If it isn't found, you don't want to set properties at all.

Upvotes: 2

Related Questions