Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

13
respostas

validar informações!

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Adicionar item na lista e atividade Adicionando Tarefa

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

bom como eu fasso para quando a pessoa preencher os dados o mesmo salvar na tag p?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>sistema de ponto</title>
</head>
<body>
    <header>
        <h1>sistema de ponto</h1>
    </header>

    <main>
        <form>
            <label for="nome">nome</label>
            <input type="text" name="nome" id="nome">
            <label for="hora">hora de entrada</label>
            <input type="number" name="hora" id="hora">
            <label for="hora">hora de saida</label>
            <input type="number" name="hora" id="hora">
            <button>adicionar</button>
        </form>
        <p></p>
    </main>
    <script src="index.js"></script>
</body>
</html>
13 respostas
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
header {
    background-color: aqua;
}
h1 {
    text-align: center;
}
label {
    display: block;
    text-align: center;
}
input {
    display: block;
    margin: 22px 580px 6px;
}
button {
    margin: 20px 632px 0;
}
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
const criarTarefa = (evento) => { 

    evento.preventDefault()

    const button = document.querySelector('button')   
}
const novaTarefa = document.querySelector('button')

novaTarefa.addEventListener('click', criarTarefa)
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala ai Geovane, tudo bem? Você vai precisar buscar o p dentro da sua função criarTarefa, ai você pode criar um novo elemento com document.createElement e no final fazer um appendChild para dentro do p que tu buscou.

Algo assim:

const criarTarefa = (evento) => { 
    evento.preventDefault()
    const p = document.querySelector('p')   
    const conteudo = document.createElement('h1')

    conteudo.textContent = 'OOI' // você precisa pegar os dados do formulário
    p.appendChild(conteudo)
}

Espero ter ajudado.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

seria isso porque não funcionou!

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>sistema de ponto</title>
</head>
<body>
    <header>
        <h1>sistema de ponto</h1>
    </header>

    <main>
        <form class="formulario">
            <label for="nome">nome</label>
            <input type="text" name="nome" id="nome">
            <label for="hora">hora de entrada</label>
            <input type="number" name="hora" id="hora">
            <label for="hora">hora de saida</label>
            <input type="number" name="hora" id="hora">
            <button>dicionar</button>
        </form>
        <p></p>
    </main>
    <script src="index.js"></script>
</body>
</html>
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
const criarTarefa = (evento) => { 
    evento.preventDefault()
    const p = document.querySelector('p')   
    const conteudo = document.createElement('h1')

    conteudo.textContent = '.formulario' // você precisa pegar os dados do formulário
    p.appendChild("p")
}
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala Geovane, na verdade nesse exemplo o conteudo do h1 vai ser uma string com o valor .formulario.

Para pegar os dados do formulário você precisa primeiro buscar sua referência:

const formulario = document.querySeletor('.formulario')

E depois acessar o valor dos campos pelo name:

formulario.nome.value // valor do campo nome
formulario.hora.value // valor do campo hora

Dai precisa ir adicionando isso na string.

Algo assim:

conteudo.textContent = 'Nome: ' + formulario.nome.value + ', hora: ' + formulario.hora.value

Espero ter ajudado.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

essa parte de acessar o valor dos campos eu não entendi!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts
formulario.nome.value // valor do campo nome
formulario.hora.value // valor do campo hora
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala Geovane, quando a gente tem uma referência de um formulário, a gente pode acessar os valores dos campos através do nome deles, ou seja, para cada campo dentro de um formulário será criada uma propriedade onde o nome dela é o valor do atributo name do campo.

Ou seja:

<form>
    <input nome="algum-nome">
</form>

Nesse caso você pode acessar a referência do input através da referência do form:

const formulario = document.querySelector('form')
console.log(formulario['algum-nome'].value)

Espero ter ajudado.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

eu teria que criar uma classe então? vc esta falando isso aqui?

<input type="number" name="hora" id="hora">
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala Geovane, não precisa criar uma classe não, apenas com o valor do name você consegue pegar a referência do campo e seu valor.

Espero ter ajudado.

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

O valor do name é hora não é?

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala Geovane, sim, o valor do name é hora, então no form para pegar essa referência você faz: form.hora.value.

Espero ter ajudado.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA