i was trying to create a modal, please check my code

Harsha Satya Vardhan Vasamsett Published at Dev

Harsha Satya Vardhan Vasamsett

I was trying to create modal when ABCD is pressed and display A, B, C, D, and when EFGH is pressed another modal to display E, F, G, H.
I was struggling with the errors in getElementByID and getElementsByClass

I am sure I am doing wrong in js logic can anyone point out, please.

var btn = document.getElementsByClassName('firstpage').addEventListener('click',function(){
  var modal = document.getElementsById("mode");
  modal.style.display = 'block';
} );

.modal1{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal2{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.key{
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fefefe;
  padding : 20px;
  border: 1px solid #888;
  width: 80%;
}

<html>
  <div class='firstpage'>
    <div class='key'>ABCD</div>
    <div class='key'>DEFG</div>
  </div>
  
  <div id='mode' class='modal1'>
    <div class='key'>A</div>
    <div class='key'>B</div>
    <div class='key'>D</div>
    <div class='key'>E</div>
  </div>
  
  <div class='modal2'>
    <div class='key'>F</div>
    <div class='key'>G</div>
    <div class='key'>H</div>
    <div class='key'>I</div>
  </div>
</html>

iota

You should use document.querySelectorAll and loop over all the elements to add event listeners to them.

document.querySelectorAll('.firstpage > .key').forEach((el,idx)=>el.addEventListener('click', function(e){
  document.querySelector(`.modal${idx + 1}`).classList.add('active');
}));

.modal1 {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal2 {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.key {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.active {
  display: block;
}

<div class='firstpage'>
  <div class='key'>ABCD</div>
  <div class='key'>DEFG</div>
</div>

<div id='mode' class='modal1'>
  <div class='key'>A</div>
  <div class='key'>B</div>
  <div class='key'>D</div>
  <div class='key'>E</div>
</div>

<div class='modal2'>
  <div class='key'>F</div>
  <div class='key'>G</div>
  <div class='key'>H</div>
  <div class='key'>I</div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.