Change display of multiple elements with querySelectorAll

Question

I try to target class names in a HTML page with a checkbox with querySelectorAll because getElementByID works only with the first element. And querySelectorAll displays a nodeList. How to correct that ?

let salesCheckbox = document.getElementById('sales-checkbox');
let euroSalesCurrency = document.querySelectorAll('.euro-sales-currency');
let originalSalesCurrency = document.querySelectorAll('.original-sales-currency');

if (salesCheckbox) {
    salesCheckbox.addEventListener('click', saleCheckbox);
}

//Function to close thirty
function saleCheckbox() {
    euroSalesCurrency.style.display = 'none';
    originalSalesCurrency.style.display = "block";

}

I want to display a span when the user is checking the checkbox, and vice versa.

Answer 1

You need to iterate over each node on the querySelectorAll.

For example:

document.querySelectorAll('.euro-sales-currency').forEach(x => x.style.display = 'none')