Dificuldade em manipular o dom!

Front-end JavaScript
#1

Oi bom eu queria que as informações do input abaixo fosse para quela área da teg (p) alguem pode me ajudar por favor?
index.html (1,8,KB)
normalize.css (6,8,KB)
style.css (259,Bytes)

<!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%;
}
#2

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}`;
});