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

O meu código não aceita a variável " peso" aceita qualquer outra, menos "peso"...

A variável peso não estava funcionando, todas os outros campos sim, menos o peso Eu resolvi substituindo a variável peso, tanto no form do HTML, quanto no arquivo js, por outra qualquerQuando o código do formulário do html estava assim ( igual a aula)

<form id="form-adiciona">
                    <div>
                        <label for="nome">Nome</label>
                        <input id="peso" name="nome" type="text" placeholder="Digitem o nome do seu paciente" class="campo">
                    </div>
                    <div class="grupo">
                        <label for="peso">peso:</label>
                        <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="altura">Altura:</label>
                        <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="gordura">% de Gordura:</label>
                        <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                    </div>

                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>

E o arquivo do javascritp estava assim. Como manda a aula.

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

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


        var nome = form.nome.value;
        var peso = form.peso.value
        var altura = form.altura.value;
        var gordura = form.gordura.value;

        console.log(nome);
        console.log(peso);
        console.log( altura);
        console.log( gordura);

 });

No console aparecem todos os valores menos o valor do peso. Ele não dá erro, somente aparece em branco. Se substituir no HTML o name="peso" para qualquer outra variável e fazer o mesmo no javascript como está abaixo

<form id="form-adiciona">
                    <div>
                        <label for="nome">Nome</label>
                        <input id="peso" name="nome" type="text" placeholder="Digitem o nome do seu paciente" class="campo">
                    </div>
                    <div class="grupo">
                        <label for="peso">peso:</label>
                        <input id="peso" name="XUXU" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="altura">Altura:</label>
                        <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="gordura">% de Gordura:</label>
                        <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                    </div>

                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>

JAVASCRIPT

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

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


        var nome = form.nome.value;
        var peso = form.XUXU.value
        var altura = form.altura.value;
        var gordura = form.gordura.value;

        console.log(nome);
        console.log(peso);
        console.log( altura);
        console.log( gordura);

 });

Tudo funciona normal. Por que??? Se estou usando o mesmo código do professor...

6 respostas

Bom dia Valmyr!

Está faltando um ponto e vírgula ";".

var peso = form.peso.value

Testa assim:

var peso = form.peso.value;

Jonas bom dia.

Testei e não funcionou, eu já aproveito para perguntar porque se usa ponto e virgula em javascript, já que com ou sem o resultado é sempre o mesmo. Em java sim. Se não tiver ponto e virgula o código nem compila.

Mas o importante é que não é essa solução, não mudou nada. Continuo esperando ajuda. Obrigado pela atenção.

Valmyr,

Faltou um ponto e vírgula aqui também:

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

JavaScript é uma linguagem interpretada, Java é uma linguagem compilada. Aí está a diferença.

Não há de quê! É sempre bom poder ajudar!

Obrigado Jonas pela ajuda. Infelizmente ainda não é isso. Aguardo

Seu input do nome tava com o id "peso" ai tava dando conflito porque tinha dois elementos com o mesmo id

Codigo html

<form id="form-adiciona">
    <div>
        <label for="nome">Nome</label>
        <input id="nome" name="nome" type="text" placeholder="Digitem o nome do seu paciente" class="campo">
    </div>
    <div class="grupo">
        <label for="peso">Peso:</label>
        <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
    </div>
    <div class="grupo">
        <label for="altura">Altura:</label>
        <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
    </div>
    <div class="grupo">
        <label for="gordura">% de Gordura:</label>
        <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
    </div>

    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
</form>

JavaScript:

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

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


        var nome = form.nome.value;
        var peso = form.peso.value;
        var altura = form.altura.value;
        var gordura = form.gordura.value;

        console.log(nome);
        console.log(peso);
        console.log(altura);
        console.log(gordura);

 });
solução!

Isso! Inclusive nas versões atuais do JS, o ponto e vírgula não são tão obrigatórios assim.

Veja esse post sobre os ';': https://medium.com/frontend-quest/por-que-usar-ponto-e-virgula-no-javascript-367b63d26b3e