How to add && operator to an if statement?

Hi Friends,

I coded a Cookie Banner with several options to turn off/on. Here is a screenshot from the sliders I created with CSS:

Screenshot 2022-04-05 at 14.20.49

Now I try to add the JavaScript code when the slider is on. The HTML for the two slider options looks like this:

          <div class="cookie-selection__wrapper">
            <div>
              <p>&blacktriangleright; Cookies für Marketing</p>
            </div>
            <div>
              <label class="switch">
                <input class="check-cookies-marketing" type="checkbox" />
                <span class="slider round"></span>
              </label>
            </div>
          </div>

          <div class="cookie-selection__wrapper">
            <p>&blacktriangleright; Cookies für Analyse</p>
            <label class="switch">
              <input class="check-cookies-tracking" type="checkbox" />
              <span class="slider round"></span>
            </label>
          </div>

The input tag is a checkbox and when this checkbox is “checked” (turned on) AND the Button “SAVE SELCETION” is clicked then I want to run a JavaScript function.

This is the code I have written in JavaScript:

let cookiesMarketing = document.querySelector('.check-cookies-marketing');
let cookiesTracking = document.querySelector('.check-cookies-tracking');

cookiesMarketing.addEventListener('change', () => {
  if (cookiesMarketing.checked) {
    // AND "SAVE SELECTION BUTTON" IS CLICKED
    useMarketingCookies();
  }
});

cookiesMarketing.addEventListener('change', () => {
  if (cookiesTracking.checked) {
    // AND "SAVE SELECTION BUTTON" IS CLICKED

    useTrackingCookies();
  }
});

The code is working, but the JavaScript function runs as soon as someone change the slider to “on”. BUT I want the function to run just when the slider is turned on AND the Button “SAVE SELECTION” is clicked.

I tryed to add the && operator to the if statement but it didn´t work.

Can someone help me please to add the && statement as a condition to the if statement?

I uploaded the whole project as a repository to Github, you can download it here

PS: The project is written in pure HTML / CSS / Vannilla JS

Thanks a lot for help!! :slight_smile:

Instead of putting the event listener on the toggle, you can put the event listener on the “save selection” button.

1 Like

@ArielLeslie But when I do this then the function gets fired both times, when someone switch the slider and when the save selection button is clicked, so I want to write an if statement with two conditions (if this AND this happens then do this), this should be possible right?

Maybe I missunderstand you, I am still not that familiar with JS. Can you please write a example code/syntax on how to do that?

let cookiesMarketing = document.querySelector('.save-selection-button');
let cookiesTracking = document.querySelector('.save-selection-button');

cookiesMarketing.addEventListener('click', () => {
  if (cookiesMarketing.checked) {
    useMarketingCookies();
  }
});

cookiesMarketing.addEventListener('click', () => {
  if (cookiesTracking.checked) {
    useTrackingCookies();
  }
});

Something like that?

How many save selection buttons do you have?
It looks like your cookiesMarketing and cookiesTracking are targeting the same element.

If you have one save button, then you would have one even listener for when it is clicked.

1 Like

I have two Buttons:

  • SAVE ALL COOKIES
  • SAVE SELECTED COOKIES

So all tracking codes get fired when someone clickes SAVE ALL COOKIES and just the marketing or the trackings cookies gets fired when someone choose just one tracking option and clickes SAVE SELECTED COOKIES.

I try like in the last example, but it did not work

The code looks like this at the moment:

let cookiesMarketing = document.querySelector('.btn.accept-selection');
let cookiesTracking = document.querySelector('.btn.accept-selection');

cookiesMarketing.addEventListener('click', () => {
  if (cookiesMarketing.checked) {
    useMarketingCookies();
    console.log('CLICK');
  }
});

cookiesMarketing.addEventListener('click', () => {
  if (cookiesTracking.checked) {
    useTrackingCookies();
    console.log('CLICK');
  }
});

But the console.log(“Click”) is not showing up in the console …

We probably aren’t going to be able to help you troubleshoot this much further unless we can see all of the code related to this. Right now we can only guess as to why your event handlers aren’t working. It does seem a little odd that you are using the same querySelector string for two separate buttons. Are you sure this is correct?

Also, wouldn’t you want to be testing the checked attribute on the checkbox inputs, not the buttons themselves?

Hmm… I am using TWO querySelectors for just ONE button, becuause I have two conditions. The first is switching on the “marketing cookies” the second is switching on the “tracking cookies” and when both are switched on then both functions are running.

Here you can see the whole (updated) JavaScript Code

Here you can see the HTML / CSS / JS

Edit: The Code we are talking about is under the comment // TEST ADVANCED TRACKING OPTIONS

Actually I dont know, but I think the code should work like that, but for one reason the addEventListener dont get triggered…

Ahh, I see that now. You don’t want to do that. You only want one click handler on the button. Do everything you need to do in that one click handler.

1 Like

Ok I will try it now…

You have same event handler, twice here, you only need once, you can use both conditionals in one function.

Not sure if I understand well your post, but based on this question, maybe you want something like this:

const myButton = document.getElementById('buttonId')

myButton.addEventListener('click',  myFunction)

function myFunction () {
    // function is run when I click the button
    // So I only need to check the slider
    if (slider.checked) {
         // do something
    }
}

There are several ways to solve this, this is just one possibility. Note that if you need to add several eventListeners (multiple buttons) you need to edit a bit this code.

1 Like

Thanks a lot for the help guys!! :slight_smile:

@raven666 I used the code example you provided and it works!!

I added this code:

const saveSelectionBtn = document.querySelector('.btn.accept-selection');

let cookiesMarketing = document.querySelector('.check-cookies-marketing');
let cookiesTracking = document.querySelector('.check-cookies-tracking');

saveSelectionBtn.addEventListener('click', myFunction);

function myFunction() {
  // function is run when I click the button
  // So I only need to check the slider
  if (cookiesMarketing.checked) {
    useMarketingCookies();
    console.log('CLICK');
  }
  if (cookiesTracking.checked) {
    useTrackingCookies();
    console.log('CLICK');
  }
}

Actually I did not know that I can just use two if statements in one function…

1 Like

Solved it, love you guys!!