Using unlimited arguments in JavaScript function

Question

'use strict'
var popup1Initer = document.querySelectorAll('.popup-1-initer'),
    popup2Initer = document.querySelectorAll('.popup-2-initer'),
    popup3Initer = document.querySelectorAll('.popup-3-initer');


open (popup1Initer, popup2Initer, popup3Initer);

function open () {
  for (var i = 0; i < arguments.length; i++) {
   for (var n = 0; n < arguments[i].length; n++) {                 
    arguments[i][n].addEventListener('click', function () {
      switch (this) {
        case popup1Initer:
          show(overlay, popup1);
          break;
        case popup2Initer:
          show(overlay, popup2);
          break;
        case popup3Initer:
          show(overlay, popup3);
          break;
        default:
          console.log('no popups');
          break;
      }
    }
  });
}

How to combine querySelectorAll and pseudoarray arguments in nested loops? I have a multiple classes (2x popup-1-initer, 2x popup-2-initer, 2x popup-3-initer) in DOM, that opens a popup by click event.

Answer 1

1./

I fix the code: lenght -> length and parenthesis match

2./

The this inside the click listener is a node element, for this reason you should ask for the class name (this.className)

'use strict'
var popup1Initer = document.querySelectorAll('.popup-1-initer'),
    popup2Initer = document.querySelectorAll('.popup-2-initer'),
    popup3Initer = document.querySelectorAll('.popup-3-initer');

open (popup1Initer, popup2Initer, popup3Initer);

function open () {
  for (var i = 0; i < arguments.length; i++) {  
   for (var n = 0; n < arguments[i].length; n++) {  
    arguments[i][n].addEventListener('click', function () {
      switch (this.className) {
        case 'popup-1-initer':
          show(overlay, popup1);
          break;
        case 'popup-2-initer':
          show(overlay, popup2);
          break;
        case 'popup-3-initer':
          show(overlay, popup3);
          break;
        default:
          console.log('no popups');
          break;
      }
    })
    }
  }
 }

//added for testing 
var overlay = 'overlay',
    popup1 = 'popup1',
    popup2 = 'popup2',
    popup3 = 'popup3';

function show(p1,p2){
    console.log(p1,p2)
}

https://jsfiddle.net/5ohm0jfv/

but you can simplify the code.

 'use strict'
 var popupIniter = document.querySelectorAll('.popup-1-initer, .popup-2-initer, .popup-3-initer');

open (popupIniter);

function open (list) {
  for (var i = 0; i < list.length; i++) {  
    list[i].addEventListener('click', function () {
      switch (this.className) {
        case 'popup-1-initer':
          show(overlay, popup1);
          break;
        case 'popup-2-initer':
          show(overlay, popup2);
          break;
        case 'popup-3-initer':
          show(overlay, popup3);
          break;
        default:
          console.log('no popups');
          break;
      }
    })
  }
 }

//added for testing 
var overlay = 'overlay',
    popup1 = 'popup1',
    popup2 = 'popup2',
    popup3 = 'popup3';

function show(p1,p2){
    console.log(p1,p2)
}

https://jsfiddle.net/3v00afhc/

As well I suggest to use data-attribute, but I suppose you can't change the html code

somethong like:

'use strict'
var popupIniter = document.querySelectorAll('[data-popup-initer]')

function selectPopUp(elem) {
    var popup = parseInt(this.getAttribute('data-popup-initer'));
    switch (popup) {
        case 1:
            show(overlay, popup1);
            break;
        case 2:
            show(overlay, popup2);
            break;
        case 3:
            show(overlay, popup3);
            break;
        default:
            console.log('no popups');
            break;
    }
}

function addPopListeners(popupIniter) {
    for (var i = 0; i < popupIniter.length; i++) {
        popupIniter[i].addEventListener('click', selectPopUp)
    }
}

addPopListeners(popupIniter);

//added for testing 
var overlay = 'overlay',
    popup1 = 'popup1',
    popup2 = 'popup2',
    popup3 = 'popup3';

function show(p1, p2) {
    console.log(p1, p2)
}

https://jsfiddle.net/78qywopm/