stopPropagation() is not working in my code. What is the issue?
When you will click on button then a dropdown will toggle and I want to hide this toggle when user click on anywhere on page.
var iconListBoxBody;
function btnCrypto(e) {
e.stopPropagation();
iconListBoxBody = document.getElementById("iconListBoxBody");
iconListBoxBody.classList.toggle("active");
}
document.body.addEventListener("click", function() {
iconListBoxBody.classList.remove("active");
});.iconListBoxBody {
display: none;
}
.iconListBoxBody.active {
display: block;
}<div class="iconListBox">
<div class="iconListBoxHeader">
<img src="assets/images/coin1.png" alt="">
<input type="text" class="form-control" value="BTC" />
<button class="btn-crypto btn btn-primary" onclick="btnCrypto()"><i class="fa fa-chevron-down"></i>click</button>
</div>
<div class="iconListBoxBody" id="iconListBoxBody">
<ul class="iconListBoxBodyList">
<li>
<img src="assets/images/coin1.png" alt="">
<span class="coinText">BTC</span>
</li>
<li>
<img src="assets/images/coin2.png" alt="">
<span class="coinText">ETH</span>
</li>
</ul>
</div>
</div>Added JavaScript event listeners.
var iconListBoxBody;
function btnCrypto(e) {
e.stopPropagation();
iconListBoxBody = document.getElementById("iconListBoxBody");
iconListBoxBody.classList.toggle("active");
}
document.body.addEventListener("click", function() {
iconListBoxBody.classList.remove("active");
});
document.querySelectorAll(".btn-crypto").forEach(el => (el.onclick = btnCrypto)).iconListBoxBody {
display: none;
}
.iconListBoxBody.active {
display: block;
}<div class="iconListBox">
<div class="iconListBoxHeader">
<img src="assets/images/coin1.png" alt="">
<input type="text" class="form-control" value="BTC" />
<button class="btn-crypto btn btn-primary">
<i class="fa fa-chevron-down"></i>click</button>
</div>
<div class="iconListBoxBody" id="iconListBoxBody">
<ul class="iconListBoxBodyList">
<li>
<img src="assets/images/coin1.png" alt="">
<span class="coinText">BTC</span>
</li>
<li>
<img src="assets/images/coin2.png" alt="">
<span class="coinText">ETH</span>
</li>
</ul>
</div>
</div>You just forgot to pass event param, I changed onclick="btnCrypto()" to onclick="btnCrypto(event)":
var iconListBoxBody;
function btnCrypto(e) {
e.stopPropagation();
iconListBoxBody = document.getElementById("iconListBoxBody");
iconListBoxBody.classList.toggle("active");
}
document.body.addEventListener("click", function() {
iconListBoxBody.classList.remove("active");
});.iconListBoxBody {
display: none;
}
.iconListBoxBody.active {
display: block;
}<div class="iconListBox">
<div class="iconListBoxHeader">
<img src="assets/images/coin1.png" alt="">
<input type="text" class="form-control" value="BTC" />
<button class="btn-crypto btn btn-primary" onclick="btnCrypto(event)"><i class="fa fa-chevron-down"></i>click</button>
</div>
<div class="iconListBoxBody" id="iconListBoxBody">
<ul class="iconListBoxBodyList">
<li>
<img src="assets/images/coin1.png" alt="">
<span class="coinText">BTC</span>
</li>
<li>
<img src="assets/images/coin2.png" alt="">
<span class="coinText">ETH</span>
</li>
</ul>
</div>
</div>Since you're using addEventListener already, remove the inline JS calling the btnCrypt function, and use addEventListener to add it to the cached button element.
// Cache your elements
const iconListBoxBody = document.querySelector('.iconListBoxBody');
const button = document.querySelector('.btn-crypto');
function btnCrypto(e) {
e.stopPropagation();
iconListBoxBody.classList.add('active');
}
document.body.addEventListener('click', function() {
iconListBoxBody.classList.remove('active');
});
button.addEventListener('click', btnCrypto);.iconListBoxBody { display: none; }
.active { display: block; }<div class="iconListBox">
<div class="iconListBoxHeader">
<img src="assets/images/coin1.png" alt="">
<input type="text" class="form-control" value="BTC" />
<button class="btn-crypto btn btn-primary">
<i class="fa fa-chevron-down"></i>click</button>
</div>
<div class="iconListBoxBody" id="iconListBoxBody">
<ul class="iconListBoxBodyList">
<li>
<img src="assets/images/coin1.png" alt="">
<span class="coinText">BTC</span>
</li>
<li>
<img src="assets/images/coin2.png" alt="">
<span class="coinText">ETH</span>
</li>
</ul>
</div>
</div>