Boa noite, estou montando o projeto de challenge, porem estou com uma duvida referente ao meu codigo. Minha duvida seria referente ao dois botoes do dialog. Somente 1 está funcionando que seria para ver a roupa o segundo que seria na parte "digitar o email" está abrindo a caixa de dialog do primeiro button.
<section class="produtos_gerais">
<h2>Produtos que estão bombando!</h2>
<div class="produtos">
<div class="produtos_catalogo">
<img src="./assets/Bolsa.png" alt="bolsa">
<div class="produtos_descricao">
<h6>Camiseta conforto</h6>
<p>Multicores e tamanhos. Tecido de algodão 100%,<br> fresquinho para o verão. Modelagem unissex.</p>
<p class="produtos_descricao_texto"> R$70,00</p>
<button class="btn_open">Ver mais</button>
</div>
<dialog>
<h4>E-mail cadastrado com sucesso!</h4>
<div class="ll">
<img src="./assets/Jaqueta.png">
<div>
<h5>Jaqueta Jeans</h5>
<p>Modelo unissex oversized com gola de camurça.
Atemporal e autêntica!</p>
<hr>
<p>R$150,00</p>
<p>Vendido e entregue por Riachuelo</p>
<hr>
<h5>Cores</h5>
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<h5>Tamanhos</h5>
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
<br>
<button>aaa</button>
</div>
</div>
<button>Fechar</button>
</dialog>
</div>
<div class="produtos_catalogo">
<img src="./assets/Calça.png" alt="bolsa">
<div class="produtos_descricao">
<h6>Calça alfaiataria </h6>
<p>Modelo Wide Leg alfaiataria em linho. Uma peça<br> pra vida toda!</p>
<p class="produtos_descricao_texto">R$180,00</p>
<button>Ver mais</button>
</div>
</div>
</section>
<section class="produtos_gerais_secundario">
<div class="produtos">
<div class="produtos_catalogo">
<img src="./assets/Jaqueta.png" alt="bolsa">
<div class="produtos_descricao">
<h6>Jaqueta Jeans</h6>
<p>Modelo unissex oversized com gola de camurça.<br> Atemporal e autêntica!.</p>
<p class="produtos_descricao_texto">R$150,00</p>
<button>Ver mais</button>
</div>
</div>
<section class="Newsletter">
<div class="Newsletter_Secundaria">
<h4>Quer receber nossas novidades, promoções exclusivas e 10% OFF na primeira compra? <br>Cadastre-se</h4>
<div class="Newsletter_email">
<form>
<input type="email" id="email" placeholder="Digite seu email" size="30">
</form>
<button class="btn_secundario">Enviar</button>
</div>
<dialog>
<h4>E-mail cadastrado com sucesso!</h4>
<p>Em breve você receberá novidades exclusivas da Meteora</p>
<button>Fechar</button>
</dialog>
</div>
</section>
</main>
<footer>
<h4>2023 © Desenvolvido por Alura | Projeto fictício sem fins comerciais.</h4>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
const swiper = new Swiper('.swiper', {
speed: 400,
spaceBetween: 100,
});
const button = document.querySelector(".btn_secundario")
const button_2 = document.querySelector(".btn_open")
const modal = document.querySelector("dialog")
const buttonClose = document.querySelector("dialog button")
button_2.onclick = function(){
modal.showModal()
}
buttonClose.onclick = function(){
modal.close()
}
button.onclick = function(){
modal.showModal()
}