1
resposta

[Dúvida] Tentativa de criar um formulário de cadastro de Devs com DOM

A ideia é o usuário inserir seu nome e ao clicar no botão, apresentar outros 2 inputs, a tecnologia a ser adicionada e 3 inputs "radio" para mencionar o tempo de experiência com a tecnologia. Entretanto a segunda parte de criar os 2 inputs está me fazendo quebrar a cabeça rsrs

<!DOCTYPE html>
<html lang="pt-br">
  <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" />
    <script src="main.js" defer></script>
    <title>Cadastro de Devs</title>
  </head>
  <body>
    <main>
      <h1>Cadastro de Devs</h1>
      <section id="main">
        <div class="formDev">
          <form id="dev">
            <label for="name">Nome:</label>
            <input type="text" name="name" id="name" />

            <button class="registerTech">Registre uma nova tecnologia</button>
          </form>
        </div>
      </section>
    </main>
  </body>
</html>
const button = document.querySelector(".registerTech");

button.addEventListener("click", () => {
  const formDev = document.querySelector("#dev");
  const ulRegister = document.createElement("ul");
  const liRegisterOne = document.createElement("li");
  const labelTecnology = document.createElement("label");
  labelTecnology.innerText = "Tecnologia a ser Adicionada:";
  const inputTecnology = document.createElement("input");
  const liRegisterTwo = document.createElement("li");
  const radioTecnology1 = document.createElement("input");
  radioTecnology1.innerText = "0-2 anos";
  radioTecnology1.type = "radio";
  radioTecnology1.name = "tecnology";
  radioTecnology1.id = "tecnology1";
  const radioTecnology2 = document.createElement("input");
  radioTecnology2.innerText = "3-4 anos";
  radioTecnology2.type = "radio";
  radioTecnology2.name = "tecnology";
  radioTecnology2.id = "tecnology2";
  const radioTecnology3 = document.createElement("input");
  radioTecnology3.innerText = "5+ anos";
  radioTecnology3.type = "radio";
  radioTecnology3.name = "tecnology";
  radioTecnology3.id = "tecnology3";

  liRegisterOne.append(labelTecnology, inputTecnology);
  liRegisterTwo.append(radioTecnology1, radioTecnology2, radioTecnology3);
  ulRegister.append(liRegisterOne, liRegisterTwo);
  formDev.appendChild(ulRegister);
});
1 resposta

Testei aqui o seu código e aparentemente esta funcionando. O que está acontecendo é que toda vez que o botão é clicado, a página está sendo recarregada, pois o botão está disparando o evento de "submit" do formulário.

Para corrigir isto, adicione o atributo type=button no botão, que assim o formulário não será enviado ao clicar no botão.

<button type="button" class="registerTech">Registre uma nova tecnologia</button>