0

Hey guys I'm building a simple modal for a fantasy ecommerce website, I want for the modal to show information dynamically based on which product the user clicks, I am trying to just do it with JavaScript by editing the styles, but I can't get querySelectorAll to actually close all of the different text id's, so that when I open up one modal, the second one I open comes with the text from the last one overlayed on top ... Is this the best way to go about? If so, how can I fix this issue? 

    document.querySelector('#item1').addEventListener('click',
function(){
  document.querySelector('.bg-modal').style.display = 'flex';
  document.querySelector('#modalTxt1').style.display = 'inline-block';
  document.querySelector('#modalImg1').style.display = 'inline-block';
});
document.querySelector('#item2').addEventListener('click',
function(){
  document.querySelector('.bg-modal').style.display = 'flex';
  document.querySelector('#modalTxt2').style.display = 'inline-block';
  document.querySelector('#modalImg2').style.display = 'inline-block';
});


document.querySelector('.close').addEventListener('click',
function(){
  document.querySelector('.bg-modal').style.display = "none";
  document.querySelectorAll('#modalTxt1 #modalTxt2 #modalTxt3 #modalTxt3 #modalTxt4 #modalTxt5 #modalTxt6').forEach(el => {
    el.style.display = "none";
});
});
gabriel0369
  • 39
  • 4

2 Answers2

2

You will need to use commas to seperate the ids

document.querySelectorAll('#modalTxt1, #modalTxt2, #modalTxt3, #modalTxt3, #modalTxt4, #modalTxt5, #modalTxt6')
Armedin Kuka
  • 665
  • 4
  • 10
0

need to use commas. MDN have showed some wrong demo:

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!
FerntreeGuy
  • 41
  • 3