On Click Event On Html Requires Double Click

I have this anchor which has an onclick function that changes the background color of certain div to green. It is properly working but the problem is it needs to be double clicked

Solution 1:

You could use ondblclick

<aondblclick="btngreen()"href="">MENU</a>

Solution 2:

As per my understanding of your problem.

Try this code. use # in href

<a onclick="btngreen()" href="#">MENU</a>

or you can use

<aonclick="btngreen()"href="javascript: void(0)">MENU</a>

Solution 3:

Works fine for me. Only issue I had was your empty href="" tag so I removed it. You could also use href="#" if you do not want to remove it.

<script>functionbtngreen(){
    document.getElementById("nameofdiv").style.backgroundColor = "green";
  }
</script><aonclick="btngreen()"href="#">MENU</a><divid="nameofdiv"style="width:100px;height:100px;"></div>

Solution 4:

If you do not need the button to be a link, you could simple change it to another tag such as <p> since the a will be trying to naviagte the page.

<ponclick="btngreen()">menu</p><scripttype="text/javascript">functionbtngreen(){
        document.getElementById("nameofdiv").style.backgroundColor = "green";
    }
</script>

or you could also just default the link to not navigate from the page such as this example below.

<aonclick="btngreen()"href="#">menu</a><scripttype="text/javascript">functionbtngreen(){
        document.getElementById("nameofdiv").style.backgroundColor = "green";
    }
</script>

Using the href="#" is a dead link and will not navigate the page anywhere.