Home Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation')

Questions

Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation')

June 2, 2022

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>

>Solution :

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>