When ads button click, ads ads ads is shown in the data-destination

I have alarm data-destination and menu data-destination at http://dot.kr/qna/230109alarmButton/

I like to plus one more data-destination which name is ads data-destination

When you click ads button which is white font-color and black background in the center, ads ads ads is shown in the area of alarm alarm alarm or menu
menu menu.
And click the ads button again which is white font-color and black background in the center, ads will be hidden.

The following is one of my trials for it.
http://dot.kr/qna/230109trial/
However, ads ads ads is shown from the first at the trial above.
It should not be shown when it loading.

http://dot.kr/qna/230109trial2/

The page above is another trial for it by my own.

“ads ads ads” is not shown when it’s loading.
It’s good.

However, when I click the ads button, “alarm alarm alarm” is not change to “ads ads ads”.

The buttons need a class of button because that’s what the js is looking for.

Add a class of button to the new buttons and then try again. You will need to add an extra modifying class also to style it differently and change the width etc.

<button class="button button-ad" etc....

Then use .button-ad to restyle it as required.

The page at http://dot.kr/qna/230109trial3/ is a lot better than previous page “trial2”.

However, it still has problems.
The 1st problem is that there is a line break between “ads” and “button” like the below although it is not very long phrase.

It should be in a line like the below without the line break.

The second problem is in the below.

I like to change it like the following.

I already mentioned that.

.button-ads{width:auto;}

You are using two buttons to do the same thing which is a bit weird but you can probably make it work by adding the active class to the second button by default.

e.g. The button in the ad section.

<button data-destination="ads" class="button button-ads active">Ads Button</button>

Assuming that you never show the first button again.

EDIT: Scrap that as it won’t work because the logic is not the same as the other buttons. The JS will need changing. Let me have another look.

I’m not really following your logic (as usual) but I think you will need to make a special case for these new actions as they don’t follow the original criteria.

Add a different class to each add button like so.

 <p class="title"><button class="button button-ads1" data-destination="ads" etc....
...
  <p class="title"><button class="button button-ads2" data-destination="ads" etc....

Then add the js check for those 2 classes.

(function (d) {
  ("use strict");

  const content = d.querySelectorAll(".modal");
  const buttons = d.querySelectorAll(".button");
  const footer = d.querySelector(".button-footer");
  const hideAllControls = d.querySelectorAll("[data-hide-all]");

  buttons.forEach((item) => {
    item.addEventListener("click", (event) => {
      if (item.classList.contains("button-ads1")) {
        hideAll();
        d.querySelector("#" + item.dataset.destination).classList.remove(
          "hide"
        );
        return;
      }
      if (item.classList.contains("button-ads2")) {
        hideAll();
        d.querySelector("#" + item.dataset.destination).classList.add("hide");
        return;
      }

      if (item.classList.contains("active")) {
        // this is the current one so hide this one and hide its destination
        item.classList.remove("active");
        d.querySelector("#" + item.dataset.destination).classList.add("hide");
        item.blur(); // remove focus
        // no need to do anything else
      } else {
        // we don't know which button is clicked so we hide all and only show this and its destination.
        hideAll();
        item.classList.add("active");
        d.querySelector("#" + item.dataset.destination).classList.remove(
          "hide"
        );
      }
    });
  });

  function hideAll() {
    content.forEach((item) => {
      item.classList.add("hide");
      item.classList.remove("show");
    });

    buttons.forEach((item) => {
      item.classList.remove("active");
    });
  }

  // hide everything when footer button is clicked.
  footer.addEventListener("click", (event) => {
    hideAllControls.forEach((item) => {
      item.classList.add("hide");
    });
  });
})(document);

There’s probably an easier way but I got lost in the new logic.

There’s a half working demo here.

https://codepen.io/paulobrien/pen/YzjZrpv

However I don’t know if it will upset whatever else you had going on.

This page at http://dot.kr/qna/230109trial4_paul/ applying your code is almost near to my target.

So far, so very good.
Thank you very much.

I like to change the above to the below if it is possible.

Don’t you just need to add the active class to the alarm button?

<button data-destination="alarm" class="button alarm-button RED active"></button>

Yes, I need to add .
Thank you very much.

1 Like

The page at http://dot.kr/qna/230109trial5/ works fine.

The code below is some part of the page.

<button class="button button-ads2" data-destination="ads" style="color:white;background:black">

I try to remove data-destination=“ads” from the code above and made a page at http://dot.kr/qna/230109trial6/

trial6 has the code below.

<button class="button button-ads2" style="color:white;background:black">

Although trial6 has NOT data-destination=“ads”, it works fine.
I am curious which one is better or near to standard between trial5 and trial6.

The second button doesn’t go anywhere so doesn’t need the data attribute. The button just hides the current item. Indeed if I;m not mistaken you don’t need the middle line of the js here.

 if (item.classList.contains("button-ads2")) {
        hideAll();
        d.querySelector("#" + item.dataset.destination).classList.add("hide");
        return;
      }

It could just be this I think (untested).

 if (item.classList.contains("button-ads2")) {
        hideAll();
        return;
      }

A page at http://dot.kr/qna/230109trial7withAds/ has contains(“button-ads1”) and contains(“button-ads2”) in js.js.

A page at http://dot.kr/qna/230109trial8withoutAds/ has removed contains(“button-ads1”) and contains(“button-ads2”) in js.js.

Both two links works fine.

Can I use the 2nd link which is shorter than 1st link?
Why does the 2nd link work fine although it has no contains(“button-ads1”) and contains(“button-ads2”)?

Use the shortest one then :slight_smile:

I thing originally there was no active class on that ad so I kept them separate,