Why is the div in my css breaking my onclick events

April 11, 2024

i’ve created an html pyramid by following a tutorial which said to use a div in the css, but now my onclick events do not work i have supplied the code below.

I have tried to delete the div in the css but that just messes everything up. I suspect the issue is with the css div, but i’m new to this and not sure how to fix it any help would be appreciated.

Everything works for the first modal but not the second etc.

function showpyramid() {
  var elements = document.querySelectorAll('.triangle');
  elements.forEach(function(element) {
    element.classList.toggle('hidden');

  });
}

function Modal1() {
  $("#Modal1").modal("show");
}

function Modal2() {
  $("#Modal2").modal("show");
}

.triangle div {
  position: absolute;
  top: 0;
  background: red;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  color: white;
  line-height: 100px;
  text-align: center;
  font-size: 0.9em;
  color: red;
  transition: ease 10s;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<h1>The Pyramid of Pain</h1>
<button class="button" onclick="showpyramid()">Show Pyramid</button>

<div class="hidden triangle">
  <div onclick="Modal1()">TTPS</div>
  <div onclick="Modal2()">Tools</div>
  <div class="network">Network/Host Artifacts</div>
  <div class="domain">Domain Names</div>
  <div class="ip">IP Addresses</div>
  <div class="hash">Hash Values</div>
</div>

>Solution :

It seems like the issue is with the CSS positioning of the div elements inside the .triangle container. When you use position: absolute; on the div elements, they are taken out of the normal document flow, which can make event handling tricky.

Changing the code to this should fix this:

function showpyramid() {
        var elements = document.querySelectorAll('.triangle');
        elements.forEach(function(element) {
          element.classList.toggle('hidden');
        });
      }
    
      function Modal1() {
        alert('Modal 1')
        $("#Modal1").modal("show");
      }
    
      function Modal2() {
        alert('Modal 2')
    
        $("#Modal2").modal("show");
      }

.triangle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 400px;
        margin-top: 50px;
      }
    
      .triangle div {
        background: red;
        color: black;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        width: 100%;
        max-width: 200px;
      }
    
      .hidden {
        display: none;
      }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

  <h1>The Pyramid of Pain</h1>
  <button class="button" onclick="showpyramid()">Show Pyramid</button>

  <div class="hidden triangle">
    <div onclick="Modal1()">TTPS</div>
    <div onclick="Modal2()">Tools</div>
    <div class="network">Network/Host Artifacts</div>
    <div class="domain">Domain Names</div>
    <div class="ip">IP Addresses</div>
    <div class="hash">Hash Values</div>
  </div>