4
respostas

Limpando campos do form

Só estou conseguindo limpar os campos da forma abaixo:

document.querySelector("#campo-nome").value = ""; document.querySelector("#campo-peso").value = ""; document.querySelector("#campo-altura").value = "";

Não consegui fazer exatamente da mesma forma que o exercício propõem, ex: abaixo:

campoNome = ""; campoPeso = ""; campoAltura = "";

A minha pergunta é, conceitualmente falando porque a opção acima não está funcionando já que essas variáveis assumem o valor do campo (.value);

Segue abaixo o código completo funcionando:

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

    event.preventDefault();

    var campoNome = document.querySelector("#campo-nome").value;
    var campoPeso = document.querySelector("#campo-peso").value;
    var campoAltura = document.querySelector("#campo-altura").value;

    var pacienteNovo =     "<tr class='paciente'>"+
                            "<td class='info-nome'>"+campoNome+"</td>"+
                            "<td class='info-peso' id='peso-1'>"+campoPeso+"</td>"+
                            "<td class='info-altura' id='altura-1'>"+campoAltura+"</td>"+
                            "<td class='info-imc' id='imc-1'>"+campoPeso/(campoAltura*2)+"</td>"+
                        "</tr>";

    var todosPacientes = document.querySelector("table");    
    todosPacientes.innerHTML += pacienteNovo;

    document.querySelector("#campo-nome").value = "";
    document.querySelector("#campo-peso").value = "";
    document.querySelector("#campo-altura").value = "";

});
4 respostas

Não conseguiu porque no trecho var campoNome = document.querySelector("#campo-nome").value; você está armazenando o valor do campo-nome e não uma referência a ele exatamente. Para tal você precisa fazer assim:

var campoNome = document.querySelector("#campo-nome");

Aí sim você conseguiria fazer isso:

campoNome.value = '';

A variável sempre armazena um valor, porém quando você passa um objeto, o valor que ela armazena é uma referência para o mesmo. No caso do .value ela armazena o valor mesmo, e não uma referência para a propriedade.

Marco,

Obrigado pela resposta.

Havia testado isso também, mesmo fazendo da forma exata como o exercício, não está funcionando.

A minha questão é justamente essa, o comportamento de uma variável nesses casos, pois para mim o valor estaria armazenado corretamente tanto que posso atribuir o valor a string corretamente:

"<td class='info-nome'>"+campoNome+"</td>"

Abaixo o código com a orientação do instrutor que não limpa corretamente:

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

    event.preventDefault();

    var campoNome = document.querySelector("#campo-nome");
    var campoPeso = document.querySelector("#campo-peso");
    var campoAltura = document.querySelector("#campo-altura");

    var pacienteNovo =     "<tr class='paciente'>"+
                            "<td class='info-nome'>"+campoNome.value+"</td>"+
                            "<td class='info-peso' id='peso-1'>"+campoPeso.value+"</td>"+
                            "<td class='info-altura' id='altura-1'>"+campoAltura.value+"</td>"+
                            "<td class='info-imc' id='imc-1'>"+campoPeso.value/(campoAltura.value*2)+"</td>"+
                        "</tr>";

    var todosPacientes = document.querySelector("table");    
    todosPacientes.innerHTML += pacienteNovo;

    //document.querySelector("#campo-nome").value = "";
    //document.querySelector("#campo-peso").value = "";
    //document.querySelector("#campo-altura").value = "";

    campoNome = "";
    campoPeso = "";
    campoAltura = "";
});

Bem, eu teria que iniciar o curso para ver o exercício, mas o que você pode fazer é utilizar o botão Sugerir melhoria que fica no canto superior direito pra falar sobre isso.

Sobre o que você disse: " A minha questão é justamente essa, o comportamento de uma variável nesses casos, pois para mim o valor estaria armazenado corretamente tanto que posso atribuir o valor a string corretamente:

"<td class='info-nome'>"+campoNome+"</td>" "

Só é verdade caso você tenha atribuído o .value na variável, caso contrário retornará um [object HTMLInputElement].

Onde temos:

campoNome = "";
campoPeso = "";
campoAltura = "";

O certo seria:

campoNome.value = "";
campoPeso.value = "";
campoAltura.value = "";

Você precisa alterar o valor do campo. Da forma que estava, o valor da variável estava sendo alterado.