Mahbub Khan Mahbub Khan - 7 months ago 29
HTML Question

window.onclick use twice in a website

I want to create a facebook like website.. i create much more of that site .
now i have a problem. i have three button. friend request , message and notification. i already done to on click drop down menu friend request and message. But there is a problem, when i click friend request button and click window then it not hide.

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById('friend_request').classList.toggle("friend_request_icon");
}

function message() {
document.getElementById("myDropdown2").classList.toggle("shows");
document.getElementById('message').classList.toggle("messaget_icon");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.friend_request')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var dropdowns1 = document.getElementsByClassName("friend_request");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}

for (i = 0; i < dropdowns1.length; i++) {
var dropdowns1 = dropdowns1[i];
if (dropdowns1.classList.contains('friend_request_icon')) {
dropdowns1.classList.remove('friend_request_icon');
}
}
}
}


// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.message')) {

var message_ = document.getElementsByClassName("dropdown-content_message");
var message_1 = document.getElementsByClassName("message");
var i;
for (i = 0; i < message_.length; i++) {
var openDropdown1 = message_[i];
if (openDropdown1.classList.contains('shows')) {
openDropdown1.classList.remove('shows');
}
}

for (i = 0; i < message_1.length; i++) {
var message_1 = message_1[i];
if (message_1.classList.contains('messaget_icon')) {
message_1.classList.remove('messaget_icon');
}
}
}
}


This is my HTML css code

<html>

<head>
<style>
.friend_request_icon {
background-image: url(../img/tVMd1hry4TG.png) !important;
background-repeat: no-repeat !important;
background-size: auto !important;
background-position: -4px -636px !important;
margin-left: 0px !important;
height: 28px !important;
width: 30px !important;
}

.friend_request {
background-image: url(../img/tVMd1hry4TG.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -4px -669px;
width: 27px;
height: 22px;
float: left;
padding: 5px 0px 0px 0px;
margin-top: -4px;
width: 27px;
height: 26px;
}

.friend_request_notification_message {
float: right;
margin: 0;
padding: 0;
width: 400px;
height: 20px;
padding-top: 10px;
padding-bottom: 12px;
}

.dropbtn {}

.dropbtn:hover,
.dropbtn:focus {}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin-top: 32px;
width: 432px;
height: 497px;
margin-left: -18%;
}

.dropdown-content_message {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin-top: 32px;
width: 432px;
height: 497px;
margin-left: -18%;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content_message a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {
background-color: #f1f1f1
}

.show {
display: block;
}

.shows {
display: block;
}

.message {
background-image: url(../img/tVMd1hry4TG.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -6px -178px;
height: 27px;
width: 27px;
float: left;
padding: 4px 0px 3px 0px;
margin: -6px 0px 0px 3px;
}

.messaget_icon.friend_request_icon {
background-image: url(../img/tVMd1hry4TG.png) !important;
background-repeat: no-repeat !important;
background-size: auto !important;
background-position: -4px -636px !important;
margin-left: 0px !important;
height: 28px !important;
width: 30px !important;
}

</style>
</head>

<body>
<div class="friend_request_notification_message">
<a href="#">
<div class="friend_request " id="friend_request" onclick="myFunction()">

</div>
</a>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

</div>


<a href="#">
<div class="message " id="message" onclick="message()">
</div>
</a>
<div id="myDropdown2" class="dropdown-content_message">
<a href="#home">how</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

</div>



<div class="notification">
</div>



</div>


</body>

</html>

Answer

you use double window.onclick so that one doesn't work use this

/* When the user clicks on the button, 
        toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
            document.getElementById('friend_request').classList.toggle("friend_request_icon");
        }
        function message() {
            document.getElementById("myDropdown2").classList.toggle("shows");
            document.getElementById('message').classList.toggle("messaget_icon");
        }

        // Close the dropdown if the user clicks outside of it
        window.onclick = function(event) {
          if (!event.target.matches('.friend_request')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var dropdowns1 = document.getElementsByClassName("friend_request");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
              var openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }

            for (i = 0; i < dropdowns1.length; i++) {
              var dropdowns1 = dropdowns1[i];
              if (dropdowns1.classList.contains('friend_request_icon')) {
                dropdowns1.classList.remove('friend_request_icon');
              }
            }
          }


          if (!event.target.matches('.message')) {

            var message_ = document.getElementsByClassName("dropdown-content_message");
            var message_1 = document.getElementsByClassName("message");
            var i;
            for (i = 0; i < message_.length; i++) {
              var openDropdown1 = message_[i];
              if (openDropdown1.classList.contains('shows')) {
                openDropdown1.classList.remove('shows');
              }
            }

            for (i = 0; i < message_1.length; i++) {
              var message_1 = message_1[i];
              if (message_1.classList.contains('messaget_icon')) {
                message_1.classList.remove('messaget_icon');
              }
            }
          }
        }