Boa tarde,
Fazendo um exercício de modal. Com o forEach ele funciona perfeitamente. Porém, quando eu estou tentando fazer com o for. Não consigo passar o index.
Abaixo segue o código.
Document *{ margin: 0; padding: 0; } .container{ max-width: 940px; margin: 0 auto; border: 3px solid lightgray; overflow: hidden; } .col-50{ float: left; width: 50%; background-color: lightcoral; height: 340px; } .color{ background-color: aqua; } .modal{ background-color: rgba(0,0,0,0.5); position: fixed; top:0; left: 0; width: 100%; height: 100%; display: none; } .modal .modal--container{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-color: bisque; width: 400px; height: 400px; } .active{ display: block; } .btn-fechar-modal{ border: 0; background-color: green; position: absolute; top: 0; right: 0; padding: 5px; }
Abrir
Lorem Ipsum1
Fechar
Abrir
Lorem Ipsum2
Fechar<script>
var modal = document.querySelectorAll('.modal');
var botoesAbrir = document.querySelectorAll('.btn-abrir-modal');
var botoesFechar = document.querySelectorAll('.modal');
// botoesAbrir.forEach(function(botao,i){
// botao.addEventListener('click', function(){
// modal[i].classList.add('active');
// })
// })
// botoesFechar.forEach(function(botao,i){
// botao.addEventListener('click', function(){
// modal[i].classList.remove('active');
// })
// })
for(var i = 0; i < botoesAbrir.length; i++){
var botao = botoesAbrir[i];
botao.addEventListener('click', function(e){
console.log();
})
}
</script>
Texto pré-formatado