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

Comportamento estranho

Olá, boa noite. Seguindo a linha de estudos de logica de programação, tem um tema relacionado a javascript. Enfim, no "Atividade 01 - Escutando eventos" da Aula 04, nos é disponibilizado o seguinte código:

<section class="container">
    <h2 id="titulo-form">Adicionar novo paciente</h2>
    <form>
        <div class="grupo">
            <label for="nome">Nome:</label>
            <input id="nome" name="nome" type="text" placeholder="digite 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>
</section>

Pois bem, no decorrer das aulas, no "Vídeo 06 - Adicionando pacientes", também pegando código da própria aula

   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;

pegando o exemplo da gordura, "form.GORDURA.value, o que coloquei em maiúsculo seria referente ao atributo name do input. mas se repararem atentamente ao código que disponibilizei logo acima, a input referente ao dado da gordura não tem o atributo name.

Meu código funcionou perfeitamente, mas ao verificar completamente os códigos, percebi esta diferença do que era mencionando no vídeo e o comportamento do código que eu estou executando.

Então veio minha dúvida: O JavaScript, por falta de um atributo name, ele consegue identificar uma ID para poder pegar o value? Pois se eu alterar o nome de um input mas deixar o ID intacto, ele pega o value da mesma forma, mas se eu, claro que se a input tiver os atibutos NAME e ID.

poderiam me explicar melhor isso? O que é mais importante neste caso, o NAME ou ID, ou os dois?

Desde já agradeço pela atenção

3 respostas
solução!

Fala ai Mauricio, tudo bem? Na verdade não é um comportamento estranho e sim algo do JavaScript mesmo.

É possível a gente buscar campos pelo seu name ou id.

Espero ter ajudado.

Olá, bom dia. Sim, eu entendi que pode buscar pelos dois métodos. Então posso concluir que se eu estiver utilizando o campo NAME para selecionar uma input, caso essa input não tenha o atributo name, devo assumir que o próprio js escolha como segunda opção o campo ID para realizar esta busca? Claro, desde que os dois atributos recebam o mesmo nome.

Fala Mauricio, sim, o mesmo acontece ao contrário, ou seja, caso não tenha o id ele vai tentar buscar pelo name.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software