Doubt functioning of JS code

Asked

Viewed 53 times

0

all good? I’m starting to learn JS and I’m making a formula that’s not working. It’s very simple, I would like to click a button, this button does not refresh the page (I made the function Event.preventDefault()) and just appear an Alert on the screen. The code already has some lines due to the IMC calculation I created, I will post below.

I’ve looked for the solution 500 times and I can’t see the error. I believe that the JS is not able to read the function botao2 created because, when inspecting, it appears undefined.

Look below:

var pacientes = document.querySelectorAll(".paciente");

for (var i = 0; i <= pacientes.length; i++){

function totalImc (a, b){
    return a / (b * b);
}

var paciente = pacientes[i];


var peso = paciente.querySelector(".info-peso").textContent;
var altura = paciente.querySelector(".info-altura").textContent;
var valorImc = paciente.querySelector(".info-imc");

var pesoValido = true;
var alturaValida = true;

if (peso < 0 || peso > 300){
    pesoValido = false;
    valorImc.textContent = "Peso Inválido!";
    paciente.classList.add("erro");
}

if (altura < 0 || altura > 2.30){
    alturaValida = false;
    valorImc.textContent = "Peso Inválido!";
    paciente.classList.add("erro");
} 

if (alturaValida && pesoValido){
    var imc = totalImc(peso, altura);
    valorImc.textContent = imc.toFixed(0) +"%";
}

}

var botao2 = document.querySelector("#adicionar-paciente");
botao2.addEventListener("click", function(event){
    event.preventDefault();
    alert("Fui clicado!");
})

HTML code (body only):

<body>

    <header>
        <div class="container">
            <h1 class="titulo">Aparecida Nutrição</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Meus pacientes</h2>
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>Gordura Corporal(%)</th>
                        <th>IMC</th>
                    </tr>
                </thead>
                <tbody id="tabela-pacientes">
                    <tr class="paciente" id="primeiro_paciente" >
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso">100</td>
                        <td class="info-altura">2.00</td>
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">João</td>
                        <td class="info-peso">80</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nome">Erica</td>
                        <td class="info-peso">54</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nome">Douglas</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" >
                        <td class="info-nome">Tatiana</td>
                        <td class="info-peso">46</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>

    <!-- Formulário para adicionar pesos -->

<section class="container">
    <br/>
    <h2 id="titulo-form">Adicionar novo paciente</h2>
    <form id="form-adiciona">
        <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" name="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>

<!-- Importação do arquivo javascript -->

<script type="text/javascript" src="js/principal.js"></script>


</body>

Could someone give me a hand, please?

Thank you,

javascript

1 answer

0


Just let your go that way: 

for (var i = 0; i < pacientes.length; i++)

The length attribute returns the number of items within its array, but the index count starts at 0, so that the last execution of its for found no index.

If you give a console.log(paciente) before making this change, you will realize that the last return is undefined, because no more indexes in the patients array for it to go through, so it returned an error, so that its button variable was never set.

  • Thanks Gabriel. Definitely a very basic mistake but I wasn’t seeing it. I really appreciate the help.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.