Targeting the element from the background

Question

Using Javascript, let say I have 3 container background that I can't access with, inside that container I have a button that do something, ex: open a new window, alert and modal.

If I want to click the background and target to that button to do the same thing in the same container, how to do that?

I tried using target or current target, but doesn't work.

const linkButton = document.querySelector(".link");
const alertButton = document.querySelector(".alert");
const backgroundClick = document.querySelector(".background");

linkButton.addEventListener("click", function () {
 console.log("test");
})

alertButton.addEventListener("click", function () {
 alert("alert");
})

backgroundClick.addEventListener("click", function () {
 console.log("working");
})

body {
  color: #eaeaea;
  padding: 0;
  margin: 0;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

.background {
  background: yellow;
  padding: 50px;
  text-align: center;
  margin-bottom: 20px;
}

/* The button used to close the modal */
.closebtn {
  text-decoration: none;
  float: right;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
}

.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

header {
  background-color: #5cb85c;
  font-size: 25px;
  color: white;
  width: 50%;
  margin: auto;
}

/*Open modal*/

/* The modal's background */
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  margin: auto;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
.modal:target {
  display: table;
  position: absolute;
}

/* The modal box */
.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}

<div class="background">
        <a class="link" href="https://www.google.com/" target="_" style="display: inline-block;">
            <button>Button Link</button>
        </a>
    </div>

    <div class="background">
        <button class="alert">Button Alert</button>
    </div>

    <div class="background">
        <a href="#id01">
            <Open class="alert">Open Modal</button>
        </a>

        <div id="id01" class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <header class="container">
                        <a href="#" class="closebtn">×</a>
                        <h2>Modal Header</h2>
                    </header>
                </div>
            </div>
        </div>
    </div>

Possible duplicate of concept: https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — MiKr13, Aug 16 '19 at 00:44
@MihirKumar I don't think so, my problem is more about how to target an element — Udzzzz, Aug 16 '19 at 00:49
**background that I can't access with** can't access with what? — Barmar, Aug 16 '19 at 00:52
@Barmar, Using drupal, so in case if someone suggest in easy way to add a link in that container then I can't do that, so I need to target that button — Udzzzz, Aug 16 '19 at 00:57

score 2 · Accepted Answer · answered Aug 16 '19 at 01:04

Use this.querySelector("button") to find the button inside the .background DIV, and trigger its click event.

You also need to loop over all the .background DIVs to add listeners to all of them.

I use e.stopPropagation() in the button event handlers. Otherwise, the click events will bubble out to the backgrounds, and you'll get an infinite loop of events.

const linkButton = document.querySelector(".link");
const alertButton = document.querySelector(".alert");
const backgroundClick = document.querySelectorAll(".background");

linkButton.addEventListener("click", function(e) {
  console.log("test");
  e.stopPropagation();
})

alertButton.addEventListener("click", function(e) {
  alert("alert");
  e.stopPropagation();
})

backgroundClick.forEach(el => el.addEventListener("click", function() {
  let button = this.querySelector("button");
  button.click();
}));

body {
  color: #eaeaea;
  padding: 0;
  margin: 0;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

.background {
  background: yellow;
  padding: 50px;
  text-align: center;
  margin-bottom: 20px;
}


/* The button used to close the modal */

.closebtn {
  text-decoration: none;
  float: right;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
}

.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

header {
  background-color: #5cb85c;
  font-size: 25px;
  color: white;
  width: 50%;
  margin: auto;
}


/*Open modal*/


/* The modal's background */

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  margin: auto;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}


/* Display the modal when targeted */

.modal:target {
  display: table;
  position: absolute;
}


/* The modal box */

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}

<div class="background">
  <a class="link" href="https://www.google.com/" target="_" style="display: inline-block;">
    <button>Button Link</button>
  </a>
</div>

<div class="background">
  <button class="alert">Button Alert</button>
</div>

<div class="background">
  <a href="#id01">
    <button class="alert">Open Modal</button>
  </a>

  <div id="id01" class="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <header class="container">
          <a href="#" class="closebtn">×</a>
          <h2>Modal Header</h2>
        </header>
      </div>
    </div>
  </div>
</div>

This is working, I thought I need to use target or current target, thanks for the answer — Udzzzz, Aug 16 '19 at 01:10

Targeting the element from the background

1 Answers1