How to change content in an onclick function for all elements inside a button tag?

Question

I have a layout where if the image and/or text are clicked, then it populates different information below it. If I have an img and paragraph inside the button, it will only work if you click anywhere OUTSIDE the img and h tag. It also only works if there is nothing inside the button tag except for plain text for some reason (no p tag, no header, etc).

I'm not well versed with JavaScript so my question is: why is my JavaScript not allowing me to click on the content inside the button to populate the info below it, and only outside of it? Do I need to make the button into a div tag instead?

const wmButton = document.querySelector("button");
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(
  " .tab-button, .toggle-text, .toggle-img"
);
const contents = document.querySelectorAll(".content");
const wmWhiteBg = document.querySelector(".workmarket-active-bg");
if (tabs) {
  tabs.onclick = (e) => {
    const id = e.target.dataset.id;
    if (id) {
      tabButton.forEach((btn) => {
        btn.classList.remove("active");
      });
      e.target.classList.add("active");

      contents.forEach((content) => {
        content.classList.remove("active");
      });
      const element = document.getElementById(id);
      element.classList.add("active");
    }
  };
}

#tab-toggle--workmarket .container,
#tab-toggle--profservices .container {
  margin: 30px auto;
}

#tab-toggle--workmarket #tab1,
#tab-toggle--workmarket #tab2,
#tab-toggle--workmarket #tab3,
#tab-toggle--workmarket #tab4,
#tab-toggle--workmarket #tab5,
#tab-toggle--workmarket #tab6,
#tab-toggle--profservices #tab1,
#tab-toggle--profservices #tab2,
#tab-toggle--profservices #tab3,
#tab-toggle--profservices #tab4,
#tab-toggle--profservices #tab5,
#tab-toggle--profservices #tab6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 50px;
  padding-top: 50px;
}

#tab-toggle--workmarket .wrapper,
#tab-toggle--profservices .wrapper {
  max-width: 1330px;
  margin: auto;
  border-radius: 10px;
}

#tab-toggle--profservices .buttonWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #20347d;
  border-radius: 10px;
  height: 81px;
  max-width: 848px;
  margin: 0 auto;
  position: relative;
  z-index: 12;
}

#tab-toggle--profservices .no-bg {
  background-color: #eff5ff;
  height: auto;
}

#tab-toggle--profservices .contentWrapper {
  max-width: 1220px;
  margin: 0 auto;
}

#tab-toggle--workmarket button.tab-button,
#tab-toggle--profservices button.tab-button {
  font-family: var(--font-family-base);
  color: #fff;
}

.tab-button.tab-button-img {
  background-color: #eff5ff !important;
  height: 100% !important;
}

#tab-toggle--profservices button.tab-button {
  border: none;
  padding: 10px;
  background-color: #20347d;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 10px;
  width: 202px;
  height: 61px;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--profservices button:hover {
  background-color: #d5e3ff;
}

#tab-toggle--workmarket button.active,
#tab-toggle--profservices button.active {
  background-color: white;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  color: #000;
}

#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  width: 202px;
  color: #33478c;
}

#tab-toggle--workmarket .active,
#tab-toggle--profservices .active {
  background-color: #f3f4f6;
}

#tab-toggle--workmarket .content,
#tab-toggle--profservices .content {
  display: none;
  padding: 10px 20px;
}

#tab-toggle--profservices .content-regular.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

#tab-toggle--profservices .content.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: -30px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

<!-------- TAB TOGGLE SECTION -------->
<div class="bg-lightblue">
  <div id="tab-toggle--profservices">
    <div class="wrapper">
      <div class="buttonWrapper no-bg gap-100">
        <button class="tab-button tab-button-img active" data-id="implementation">
                implement
                <img
                  src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Implementation</h3>
              </button>
        <button class="tab-button tab-button-img" data-id="advisory">
                advisory
                <img
                  src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Advisory</h3>
              </button>
        <button class="tab-button tab-button-img" data-id="integration">
                integration
                <img
                  src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Integration</h3>
              </button>
        <button class="tab-button tab-button-img" data-id="transformation">
                transformation
                <img
                  src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Transformation</h3>
              </button>
      </div>
      <div class="contentWrapper">
        <div class="content content-regular active" id="implementation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">Info 1</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image1.png?rev=5dd2ef9a431b456b9973dee3b4790cb9&hash=31696B489A01F403489B36816938CA88" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="advisory">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 2</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image2.png?rev=fe0c3ff8007c45e394c8502fcbe2e695&hash=3174FBD7B8A72AAE4198F4BDBA319A25" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="integration">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 3</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                info 1
              </li>
              <li>
                info 2
              </li>
              <li>
                info 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image1.png?rev=5dd2ef9a431b456b9973dee3b4790cb9&hash=31696B489A01F403489B36816938CA88" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="transformation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 4</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image4.png?rev=17af045073894b44b91a98cb93b1f477&hash=C7B11A1FF252D81DE023CE812E9D33D0" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Rory McCrossan · Accepted Answer · 2024-09-18 14:41:17Z

The issue is because the target of the click event is not always the button as you expect it to be. It could be the img or any of the other child elements within the button. Therefore the call to dataset returns undefined and your logic falls down.

To fix the issue, use e.target.closest('button') to ensure that you have a reference to the button as you expect.

Here's a working example with this implemented. Note the use of addEventListener() over the onclick property, and the use of a guard clause to exit the function early when possible.

const wmButton = document.querySelector("button");
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(" .tab-button, .toggle-text, .toggle-img");
const contents = document.querySelectorAll(".content");
const wmWhiteBg = document.querySelector(".workmarket-active-bg");

tabs && tabs.addEventListener('click', e => {
  const button = e.target.closest('button');
  if (!button)
    return;

  contents.forEach(content => content.classList.remove("active"));
  tabButton.forEach(btn => btn.classList.remove("active"));
  
  button.classList.add("active");
  const element = document.getElementById(button.dataset.id);
  element.classList.add("active");
});

#tab-toggle--workmarket .container,
#tab-toggle--profservices .container {
  margin: 30px auto;
}

#tab-toggle--workmarket #tab1,
#tab-toggle--workmarket #tab2,
#tab-toggle--workmarket #tab3,
#tab-toggle--workmarket #tab4,
#tab-toggle--workmarket #tab5,
#tab-toggle--workmarket #tab6,
#tab-toggle--profservices #tab1,
#tab-toggle--profservices #tab2,
#tab-toggle--profservices #tab3,
#tab-toggle--profservices #tab4,
#tab-toggle--profservices #tab5,
#tab-toggle--profservices #tab6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 50px;
  padding-top: 50px;
}

#tab-toggle--workmarket .wrapper,
#tab-toggle--profservices .wrapper {
  max-width: 1330px;
  margin: auto;
  border-radius: 10px;
}

#tab-toggle--profservices .buttonWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #20347d;
  border-radius: 10px;
  height: 81px;
  max-width: 848px;
  margin: 0 auto;
  position: relative;
  z-index: 12;
}

#tab-toggle--profservices .no-bg {
  background-color: #eff5ff;
  height: auto;
}

#tab-toggle--profservices .contentWrapper {
  max-width: 1220px;
  margin: 0 auto;
}

#tab-toggle--workmarket button.tab-button,
#tab-toggle--profservices button.tab-button {
  font-family: var(--font-family-base);
  color: #fff;
}

.tab-button.tab-button-img {
  background-color: #eff5ff !important;
  height: 100% !important;
}

#tab-toggle--profservices button.tab-button {
  border: none;
  padding: 10px;
  background-color: #20347d;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 10px;
  width: 202px;
  height: 61px;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--profservices button:hover {
  background-color: #d5e3ff;
}

#tab-toggle--workmarket button.active,
#tab-toggle--profservices button.active {
  background-color: white;
  margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  color: #000;
}

#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
  width: 202px;
  color: #33478c;
}

#tab-toggle--workmarket .active,
#tab-toggle--profservices .active {
  background-color: #f3f4f6;
}

#tab-toggle--workmarket .content,
#tab-toggle--profservices .content {
  display: none;
  padding: 10px 20px;
}

#tab-toggle--profservices .content-regular.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

#tab-toggle--profservices .content.active {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
  align-items: center;
  gap: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin: -30px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}

<!-------- TAB TOGGLE SECTION -------->
<div class="bg-lightblue">
  <div id="tab-toggle--profservices">
    <div class="wrapper">
      <div class="buttonWrapper no-bg gap-100">
        <button class="tab-button tab-button-img active" data-id="implementation">
          implement
          <img src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35" width="150" class="toggle-img" />
          <h3 class="blue toggle-text">Implementation</h3>
        </button>
        <button class="tab-button tab-button-img" data-id="advisory">
          advisory
          <img
            src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35" width="150" class="toggle-img" >
          <h3 class="blue toggle-text">Advisory</h3>
        </button>
        <button class="tab-button tab-button-img" data-id="integration">
                integration
                <img
                  src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Integration</h3>
              </button>
        <button class="tab-button tab-button-img" data-id="transformation">
                transformation
                <img
                  src="https://content.adp.com/-/media/apps/wfn/images/lp_professionalservices_tab3-transformation_170w_en.png?rev=de9e9832dc674d2ba354f7b8651c6524&hash=3E97CB9DC47244C3F516CA04E76F7E35"
                  width="150"
                  class="toggle-img"
                />
                <h3 class="blue toggle-text">Transformation</h3>
              </button>
      </div>
      <div class="contentWrapper">
        <div class="content content-regular active" id="implementation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">Info 1</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image1.png?rev=5dd2ef9a431b456b9973dee3b4790cb9&hash=31696B489A01F403489B36816938CA88" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="advisory">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 2</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image2.png?rev=fe0c3ff8007c45e394c8502fcbe2e695&hash=3174FBD7B8A72AAE4198F4BDBA319A25" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="integration">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 3</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                info 1
              </li>
              <li>
                info 2
              </li>
              <li>
                info 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image1.png?rev=5dd2ef9a431b456b9973dee3b4790cb9&hash=31696B489A01F403489B36816938CA88" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
        <div class="content" id="transformation">
          <div class="pf-two-col-1">
            <p class="deep-red wfn-caps bold pb-0 mb-0">info 4</p>
            <h2 class="pt-0 mt-0">
              information here
            </h2>
            <ul class="profservices">
              <li>
                list 1
              </li>
              <li>list 2</li>
              <li>
                list 3
              </li>
            </ul>
          </div>
          <div class="pf-two-col-2">
            <img src="https://content.adp.com/-/media/apps/wfn/images/lp_tabcomponent_image4.png?rev=17af045073894b44b91a98cb93b1f477&hash=C7B11A1FF252D81DE023CE812E9D33D0" class="pf-img-col2" skiplazy="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This fixed the issue. Makes sense to add .closest. thank you so much!

Collectives™ on Stack Overflow

How to change content in an onclick function for all elements inside a button tag?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related