Snackbar ne fonctionne que sur un élément de certaine classe

Question

J'essaie d'ajouter un écouteur d'événement pour snackbar sur tous les boutons de la classe add-culture-button, mais cela ne fonctionne que pour le premier élément. Pour les autres éléments, le snack ne s'affiche pas du tout (et il n'y a pas d'erreur dans la console).

var snackbarContainer = document.querySelector("#notification"); 
var showSnackbarButton = document.querySelector(".add-culture-button"); 
var plantingLabel = document.querySelector("#planting-label"); 
var handler = function(event) { 
    var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
    plantingLabel.setAttribute("data-badge", culturesCount - 1); 
} 

showSnackbarButton.addEventListener("click", function() { 
    var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
    plantingLabel.setAttribute("data-badge", culturesCount + 1); 
    var data = { 
     message: "Kultura je dodata u listu za setvu.", 
     timeout: 2000, 
     actionHandler: handler, 
     actionText: 'Opozovi' 
    }; 
    snackbarContainer.MaterialSnackbar.showSnackbar(data); 
}); 

Existe-t-il un moyen de le faire fonctionner pour tous les éléments sans répétition du code?

Answer 1

s'avère que je ne devais utiliser querySelectorAll au lieu de querySelector ...

var snackbarContainer = document.querySelector("#notification"); 
var showSnackbarButton = document.querySelectorAll(".add-culture-button"); 
var plantingLabel = document.querySelector("#planting-label"); 
var handler = function(event) { 
    var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
    plantingLabel.setAttribute("data-badge", culturesCount - 1); 
} 

for (var i = 0; i < showSnackbarButton.length; i++) { 
    showSnackbarButton[i].addEventListener("click", function() { 
     var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value); 
     plantingLabel.setAttribute("data-badge", culturesCount + 1); 
     var data = { 
      message: "Kultura je dodata u listu za setvu.", 
      timeout: 2000, 
      actionHandler: handler, 
      actionText: 'Opozovi' 
     }; 
     snackbarContainer.MaterialSnackbar.showSnackbar(data); 
    }); 
}