Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Formulário JavaScript

Pessoal,

No curso do Douglas em JavaScript: Programando na linguagem da web, ele ensina como trabalhar com os formulários, porém, estou com um problema.

Ao trabalhar com Radio button, consigo pegar o VALUE mas não consigo jogar ele dentro do TD, no console.log ele aparece no TD não. Sempre dá erro na linha, " pacienteTr.appendChild(montaTd(paciente.genero, "info-genero")); ".

Alguém poderia me ajudar?

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var paciente = obtemPacienteDoFormulario(form);

    console.log(form.generos.value)

});

function obtemPacienteDoFormulario(form) {

    var paciente = {
        id: form.id.value,
        nome: form.nome.value,
        idade: form.idade.value,
        genero: getRadioValor(form.generos.value),
    }

    return paciente;
}

function getRadioValor(name){
    var rads = document.getElementsByName(name);

    for(var i = 1; i < rads.length; i++){
     if(rads[i].checked){
      return rads[i].value;
     }

    }

    return null;
}


function montaTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.id, "info-id"));
    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.idade, "info-idade"));
    pacienteTr.appendChild(montaTd(paciente.genero, "info-genero"));

    return pacienteTr;
}

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.classList.add(classe);
    td.textContent = dado;

    return td;
}
5 respostas

Fala ai Marlon, tudo bem? Consegue compartilhar o projeto completo? Assim fica mais fácil simular o problema e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Fala ai Marlon, tudo bem? Testei seu código e o mesmo funcionou corretamente, ele adicionou o gênero na tabela, o único problema é que ele adicionou o valor como 1 isso porque você definiu os radios' com os valores 1 e 2.

Para resolver isso poderia mudar os valores para masculino e feminino.

Outro detalhe, quando for realizar importações de arquivos .css, .js ou imagens, tente optar em utilizar caminhos relativos e não absolutos.

Exemplo:

<link rel="stylesheet" type="text/css" href="C:/Users/brsilvama162/OneDrive - NESTLE/Documents/Pessoal/Kidopi/CSS/reset.css">
<link rel="stylesheet" type="text/css" href="C:/Users/brsilvama162/OneDrive - NESTLE/Documents/Pessoal/Kidopi/CSS/index.css">

Na minha máquina deu erro na hora de importá-los, isso porque não existe esse caminho absoluto na minha máquina, você poderia trocar para:

<link rel="stylesheet" type="text/css" href="./CSS/reset.css">
<link rel="stylesheet" type="text/css" href="./CSS/index.css">

O . se refere a pasta atual, ou seja, a pasta do projeto: kidopi e depois navegamos através das pastas.

Espero ter ajudado.

Matheus, boa noite!

Muito obrigado pelas dicas e por testar a aplicação. Que estranho, estava em uma máquina onde não adicionava na tabela, mudei de máquina e funcionou tbm.

Referente ao numero 1 e 2, tenho que mandar esses dados para uma API externa que só aceita 1 ou 2.

Referente ao caminho absoluto, utilizei esse caminho longo pois tinha feito um menor e não tinha dado certo e segui dessa maneira, mas já corrigi aqui. Notei que ao tentar fazer essas modificações na folha de estilo ela não aceita, não seria uma boa maneira de incorporar uma imagem ao código?

Muito obrigado!

solução!

Magina Marlon.

Vamos lá:

Notei que ao tentar fazer essas modificações na folha de estilo ela não aceita, não seria uma boa maneira de incorporar uma imagem ao código?

Dentro do CSS provavelmente você vai precisar voltar uma pasta, no caso ../ e depois ir até a pasta das imagens ../img/alguma-imagem.jpg.

Sempre que precisar não deixe de criar suas dúvidas.

Espero ter ajudado.