Entrar Ainda não tem acesso?
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 Senior Software Engineer

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 Senior Software Engineer

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 Senior Software Engineer

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 Senior Software Engineer

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 Senior Software Engineer

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.