Challenge-7 - semana 2 | VueJS

Boa noite, estou tentando aplicar a questão do dialog no meu codigo, mas estou com problemas. para ativação do botão "enviar". Usei um codigo que estava testando e funcionou, porem quando passo para o principal não vai

 <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 open="modais">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.</p>
      
          <button>Fechar</button>
            </diialog>
        </div>
        </section>

const button = document.querySelector("btn_secundario")
const modal = document.querySelector("dialog")
const buttonClose = document.querySelector("dialog button")

button.onclick = function(){
    modal.showModal()
}

buttonClose.onclick = function(){
modal.close()
}

Olá Christofferson! Tudo certo?

No seu código JavaScript, você está tentando selecionar o botão usando document.querySelector("btn_secundario"). Como você está usando uma classe para o botão, você deve usar um ponto antes do nome da classe. Tente alterar para document.querySelector(".btn_secundario").

Outro ponto, é que no HTML, o atributo open="modais" não é necessário. O elemento <dialog> deve ser aberto e fechado usando os métodos showModal() e close() no JavaScript. Certifique-se de que o dialog não está aberto por padrão no HTML, a menos que você queira que ele apareça imediatamente.

Notei que você escreveu </diialog> em vez de </dialog>. Só para mitigar erros, repara isso tbm.

Testa assim, acho que já vai evoluir seu código:

<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>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.</p>
            <button>Fechar</button>
        </dialog>
    </div>
</section>

const button = document.querySelector(".btn_secundario");
const modal = document.querySelector("dialog");
const buttonClose = document.querySelector("dialog button");

button.onclick = function() {
    modal.showModal();
}

buttonClose.onclick = function() {
    modal.close();
}

Se ainda o erro persistir, por favor, compartilha seu código completo comigo.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!