Dificuldade em manipular o dom!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css"> <title>Document</title> </head> <body> <header> <h1>Anotação do leite do cliente</h1> </header> <main> <form action=""> <div class="formulario"> <div class="label-input"> <label for="" class="label-nome"> Nome</label> <input type="text" name="" id="nome"> </div> <div class="label-input"> <label for="" class="label-quantidade">Quantidade</label> <input type="number" name="" id="quantidade"> </div> <div class="label-input"> <label for="" class="label-data">Data</label> <input type="date" name="" id="data"> <button onclick="clicar">Cadastrar</button> </div> </div> </form> <p class="p-cliente">Nome do(a)cliente</p> <p class="p-quantidade">Quantidade</p> <p class="p-data">Data</p> </main> <script> const nome = document.getElementById('nome') const quantidade = document.getElementById('quantidade') const data = document.getElementById('data') function clicar() { nome.getElementsByClassName('p-cliente') quantidade.getElementsByClassName('p-quantidade') data.getElementsByClassName('p-data') } innerText('clicar') </script> </body> </html>

h1 { text-align: center; border-bottom: 3px solid rgb(19, 175, 214); } .formulario { text-align: center; } label { display: flex; margin-left: 48%; margin-top: 4%; } p { display: inline; margin-left: 19%; }

1 Resposta

Solucao aceita

rodriguesabner 2 de mai. de 2022

vc pode matar 2 coelhos com uma cajadada só. Notou que o form fica redirecionando pra alguma tela? Isso é pq vc ta usando o form, então o submit fica disparando uma ação.

Agora p/ manipular o DOM, vc pode pegar o nome da classe pelo querySelector e depois fazer o que quiser, que nesse caso é:

document.querySelector(".minhaClasse").innerText = "alguma coisa";

Body:

<body>
  <header>
    <h1>Anotação do leite do cliente</h1>
  </header>
  <main>
    <form onsubmit="clicar" id="form">
      <div class="formulario">
        <div class="label-input">
          <label for="" class="label-nome"> Nome</label>
          <input type="text" name="" id="nome">
        </div>
        <div class="label-input">
          <label for="" class="label-quantidade">Quantidade</label>
          <input type="number" name="" id="quantidade">
        </div>
        <div class="label-input">
          <label for="" class="label-data">Data</label>
          <input type="date" name="" id="data">
          <button type="submit">Cadastrar</button>
        </div>
      </div>

    </form>
    <p class="p-cliente">Nome do(a) cliente: N/D</p>
    <p class="p-quantidade">Quantidade: N/D</p>
    <p class="p-data">Data: N/D</p>

  </main>
</body>

Script:

const nome = document.getElementById('nome')
const quantidade = document.getElementById('quantidade')
const data = document.getElementById('data')

const formDOM = document.getElementById("form");
formDOM.addEventListener("submit", function(e) {
  e.preventDefault();
  
  document.querySelector(".p-cliente").innerText = `Nome do(a) cliente: ${nome.value}`;
  document.querySelector(".p-quantidade").innerText = `Quantidade: ${quantidade.value}`;
  document.querySelector(".p-data").innerText = `Data: ${data.value}`;
});

1 Resposta

Topicos relacionados