Avatar of MJ
MJ
Flag for United States of America asked on

JavaScript: Is selector structured properly for listeners?

Is this the correct selector for the  DIVs with class="flexbox" with sibling of DIV/ID="card" or DIV/ID="ach"   to set a listener?

<div class="flexbox jc-center ai-center" style="gap: 1rem;">
    <div class="flexbox">
        <div id="card" class="flexbox ai-stretch fd-row botw-card funding-card" style="gap: 1.5rem;">
            <div class="flexbox jc-center ai-center fd-column" style="order: 1;"><img src="/sme/joinus/static/images/logos-credit-cards-vertical.svg" class="botw-card-image funding-card-image" aria-hidden="true" alt="Bank Logo"></div>
            <div class="flexbox jc-flex-start ai-flex-start fd-column" style="order: 0;">
                <h3 class="botw-card-header funding-card-header">Debit or Credit</h3>
                <div class="botw-card-content funding-card-content">
                    <div class="" id="">Enter your card details to deposit up to <strong>$500</strong></div>
                </div>
            </div>
        </div>
    </div>
    <div class="flexbox">
        <div id="ach" class="flexbox ai-stretch fd-row botw-card funding-card" style="gap: 1.5rem;">
            <div class="flexbox jc-center ai-center fd-column" style="order: 1;"><img src="/sme/joinus/static/images/logo-plaid.svg" class="botw-card-image funding-card-image" aria-hidden="true" alt="Bank Logo"></div>
            <div class="flexbox jc-flex-start ai-flex-start fd-column" style="order: 0;">
                <h3 class="botw-card-header funding-card-header">Bank Transfer</h3>
                <div class="botw-card-content funding-card-content">
                    <div class="" id="">One-time transfer between two accounts up to <strong>$5000</strong></div>
                </div>
            </div>
        </div>
    </div>
</div>

Open in new window

I'm trying to detect a click on either. This is how I'm structuring my listener

    function _dtmMonitorButton1() {
        var button1 = document.querySelector('div.flexbox.div#card');
        if (button1 != null) {
            document.querySelector('div.flexbox.div#card').addEventListener('click', _dtmSetFundType1);
        }
    };

    function _dtmMonitorButton2() {
        var button2 = document.querySelector('div.flexbox.div#ach');
        if (button2 != null) {
            document.querySelector('div.flexbox.div#ach').addEventListener('click', _dtmSetFundType2);
        }
    };

Open in new window

Is this correct or am I doing this wrong? The elements are clickable but not here due to missing CSS.


Thanks!

JavaScriptWeb DevelopmentHTML

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
David H.H.Lee

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
MJ

ASKER
Thank you sir!
Michel Plungjan

I would delegate  - something like this

https://jsfiddle.net/mplungjan/b1fv6gdc/

const _dtmSetFundType1 = () => console.log("card"); // dummy test function
const _dtmSetFundType2 = () => console.log("ach"); // dummy test function

document.querySelector('div.flexbox').addEventListener('click', function(e) {
  const tgt = e.target.closest('.funding-card');
  if (tgt) {
    if (tgt.id === "card") _dtmSetFundType1();
    else if (tgt.id === "ach") _dtmSetFundType2();
  }
});

Open in new window


Alternative if the two _dtmSetFundType are not large and perhaps very similar only have one function and pass the ID

document.querySelector('div.flexbox').addEventListener('click', function(e) {
  const tgt = e.target.closest('.funding-card');
  if (tgt) {
    _dtmSetFundType(tgt.id);
  }
});

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes