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

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 >
  <div >
    <img src="assets/images/coin1.png" alt="">
    <input type="text"  value="BTC" />
    <button  onclick="btnCrypto()"><i ></i>click</button>
  </div>
  <div  id="iconListBoxBody">
    <ul >
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span >BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span >ETH</span>
      </li>
    </ul>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <img src="assets/images/coin1.png" alt="">
    <input type="text"  value="BTC" />
    <button >
    <i ></i>click</button>
  </div>
  <div  id="iconListBoxBody">
    <ul >
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span >BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span >ETH</span>
      </li>


    </ul>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <img src="assets/images/coin1.png" alt="">
    <input type="text"  value="BTC" />
    <button  onclick="btnCrypto(event)"><i ></i>click</button>
  </div>
  <div  id="iconListBoxBody">
    <ul >
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span >BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span >ETH</span>
      </li>
    </ul>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <img src="assets/images/coin1.png" alt="">
    <input type="text"  value="BTC" />
    <button >
    <i ></i>click</button>
  </div>
  <div  id="iconListBoxBody">
    <ul >
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span >BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span >ETH</span>
      </li>
    </ul>
  </div>
</div>