Can yo use an array for querySelectorAll?

Question

I want to have this toggle swap the text between monthly and annual price. I find it works best using querySelectorAll however as I need this done in three separate places the only way I can find to write it is as below. Can I select all the needed spans using an array as I have other spans in the page that I don't need to select? Or could you assist me in a way that I could refine this code?

 function mouseToggleSwitch() { var checkBox = document.getElementById("myCheck"); var month = document.querySelectorAll("span")[1]; var year = document.querySelectorAll("span")[2]; var proMonth = document.querySelectorAll("span")[3]; var proYear = document.querySelectorAll("span")[4]; var masterMonth = document.querySelectorAll("span")[5]; var masterYear = document.querySelectorAll("span")[6]; if (checkBox.checked == true) { month.style.display = "block"; year.style.display = "none"; proMonth.style.display = "block"; proYear.style.display = "none"; masterMonth.style.display = "block"; masterYear.style.display = "none"; } else { month.style.display = "none"; year.style.display = "block"; proMonth.style.display = "none"; proYear.style.display = "block"; masterMonth.style.display = "none"; masterYear.style.display = "block"; } }

 .display-4 { font-size: 2rem; font-weight: 700; color: hsl(233, 13%, 49%); font-family: Montserrat, sans-serif; } /******* TOGGLE SWITCH *******/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)); -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)) } input:checked+ :hover { background: hsl(240, 100%, 90%); } input:focus+.slider { box-shadow: 0 0 1px hsl(237, 63%, 64%); } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider { border-radius: 34px; } .slider:hover { background: hsl(240, 100%, 90%); } .slider:before { border-radius: 50%; } .toggle-price p { display: inline-block; position: relative; top: 4px; color: hsl(234, 14%, 74%); } .card-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 2rem; color: hsl(232, 13%, 33%); } .annual-price { display: none; }

 <div id="wrapper"> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <div class="toggle-price"> <p class="annual">Annually</p> <label class="switch"> <input type="checkbox" id="myCheck" onClick="mouseToggleSwitch()" autofocus checked> <span class="slider"></span> </label> <p class="month">Monthly</p> </div> </div> <div class="container"> <div class="card-deck mb-3 text-center"> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Basic</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;19.99</span> <span class="annual-price">&dollar;199.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm highlight"> <div class="card-header"> <h4 class="my-0">Professional</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><span id="monthly-price">&dollar;24.99</span> <span class="annual-price">&dollar;249.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Master</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;39.99</span> <span class="annual-price">&dollar;399.99</span></h1> </div> </div> </div> </div> </div>

https://codepen.io/LizUK/pen/abOMQYx

Answer 1

Like this

I had to fix an ID that should be a class

NOTE : I also initialise the display to whatever the checked status is on the checkbox when it loads from server

I removed the inline function from the checkbox too

function show(month) {
  document.querySelectorAll(".pricing-card-title").forEach(function(container) { 
    container.querySelector("span.monthly-price").style.display = month ? "block" : "none";
    container.querySelector("span.annual-price").style.display = month ? "none" : "block";
  })
}

window.addEventListener("load", function() { // on page load
  const chk = document.getElementById("myCheck")
  chk.addEventListener("click", function() {
    show(this.checked)
  })
  show(chk.checked); // initialise based on initial checked
})

 function show(month) { document.querySelectorAll(".pricing-card-title").forEach(function(container) { container.querySelector("span.monthly-price").style.display = month ? "block" : "none"; container.querySelector("span.annual-price").style.display = month ? "none" : "block"; }) } window.addEventListener("load", function() { // on page load const chk = document.getElementById("myCheck") chk.addEventListener("click", function() { show(this.checked) }) show(chk.checked); // initialise based on initial checked })

 .display-4 { font-size: 2rem; font-weight: 700; color: hsl(233, 13%, 49%); font-family: Montserrat, sans-serif; } /******* TOGGLE SWITCH *******/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)); -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)) } input:checked+ :hover { background: hsl(240, 100%, 90%); } input:focus+.slider { box-shadow: 0 0 1px hsl(237, 63%, 64%); } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider { border-radius: 34px; } .slider:hover { background: hsl(240, 100%, 90%); } .slider:before { border-radius: 50%; } .toggle-price p { display: inline-block; position: relative; top: 4px; color: hsl(234, 14%, 74%); } .card-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 2rem; color: hsl(232, 13%, 33%); }

 <div id="wrapper"> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <div class="toggle-price"> <p class="annual">Annually</p> <label class="switch"> <input type="checkbox" id="myCheck" autofocus checked> <span class="slider"></span> </label> <p class="month">Monthly</p> </div> </div> <div class="container"> <div class="card-deck mb-3 text-center"> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Basic</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"> <span class="monthly-price">&dollar;19.99</span> <span class="annual-price">&dollar;199.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm highlight"> <div class="card-header"> <h4 class="my-0">Professional</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"> <span class="monthly-price">&dollar;24.99</span> <span class="annual-price">&dollar;249.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Master</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"> <span class="monthly-price">&dollar;39.99</span> <span class="annual-price">&dollar;399.99</span></h1> </div> </div> </div> </div> </div>

Shorter, driven by the monthly-price - assuming the annual span is after the monthly span

function show(month) {
  document.querySelectorAll("span.monthly-price").forEach(function(span) { 
    span.style.display = month ? "block" : "none";
    span.nextElementSibling.style.display = month ? "none" : "block";
  })
}

// same "load" code as first snippet

 function show(month) { document.querySelectorAll("span.monthly-price").forEach(function(span) { span.style.display = month ? "block" : "none"; span.nextElementSibling.style.display = month ? "none" : "block"; }) } window.addEventListener("load", function() { // on page load const chk = document.getElementById("myCheck") chk.addEventListener("click", function() { show(this.checked) }) show(chk.checked); // initialise based on initial checked })

 .display-4 { font-size: 2rem; font-weight: 700; color: hsl(233, 13%, 49%); font-family: Montserrat, sans-serif; } /******* TOGGLE SWITCH *******/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)); -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)) } input:checked+ :hover { background: hsl(240, 100%, 90%); } input:focus+.slider { box-shadow: 0 0 1px hsl(237, 63%, 64%); } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider { border-radius: 34px; } .slider:hover { background: hsl(240, 100%, 90%); } .slider:before { border-radius: 50%; } .toggle-price p { display: inline-block; position: relative; top: 4px; color: hsl(234, 14%, 74%); } .card-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 2rem; color: hsl(232, 13%, 33%); }

 <div id="wrapper"> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <div class="toggle-price"> <p class="annual">Annually</p> <label class="switch"> <input type="checkbox" id="myCheck" autofocus checked> <span class="slider"></span> </label> <p class="month">Monthly</p> </div> </div> <div class="container"> <div class="card-deck mb-3 text-center"> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Basic</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"> <span class="monthly-price">&dollar;19.99</span> <span class="annual-price">&dollar;199.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm highlight"> <div class="card-header"> <h4 class="my-0">Professional</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"> <span class="monthly-price">&dollar;24.99</span> <span class="annual-price">&dollar;249.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Master</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"> <span class="monthly-price">&dollar;39.99</span> <span class="annual-price">&dollar;399.99</span></h1> </div> </div> </div> </div> </div>

Answer 2

 function mouseToggleSwitch() { var checkBox = document.getElementById("myCheck"); const clsName = checkBox.checked ? 'monthly-price' : 'annual-price'; document.querySelectorAll('.monthly-price,.annual-price').forEach((x) => x.className == clsName ? x.style.display = "block" : x.style.display = "none"); }

 .display-4 { font-size: 2rem; font-weight: 700; color: hsl(233, 13%, 49%); font-family: Montserrat, sans-serif; } /******* TOGGLE SWITCH *******/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)); -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%)) } input:checked+ :hover { background: hsl(240, 100%, 90%); } input:focus+.slider { box-shadow: 0 0 1px hsl(237, 63%, 64%); } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider { border-radius: 34px; } .slider:hover { background: hsl(240, 100%, 90%); } .slider:before { border-radius: 50%; } .toggle-price p { display: inline-block; position: relative; top: 4px; color: hsl(234, 14%, 74%); } .card-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 2rem; color: hsl(232, 13%, 33%); } .annual-price { display: none; }

 <div id="wrapper"> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <div class="toggle-price"> <p class="annual">Annually</p> <label class="switch"> <input type="checkbox" id="myCheck" onClick="mouseToggleSwitch()" autofocus checked> <span class="slider"></span> </label> <p class="month">Monthly</p> </div> </div> <div class="container"> <div class="card-deck mb-3 text-center"> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Basic</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;19.99</span> <span class="annual-price">&dollar;199.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm highlight"> <div class="card-header"> <h4 class="my-0">Professional</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;24.99</span> <span class="annual-price">&dollar;249.99</span></h1> </div> </div> <div class="card mb-4 shadow-sm"> <div class="card-header"> <h4 class="my-0">Master</h4> </div> <div class="card-body"> <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;39.99</span> <span class="annual-price">&dollar;399.99</span></h1> </div> </div> </div> </div> </div>

Using document.querySelectorAll, we can pick both the selectors monthly-price,annual-price from there based on the classname we can assign either block or display as none. Using document.querySelectorAll('span') doesn't seem to be a perfect one as it could mislead if there are any other spans in the document prior to this. Hope this helps!