I need to make a comparison using Javascript

Asked

Viewed 36 times

-3

I need to solve a seemingly simple exercise for a Javascript course, but I’m not getting it done.

I need to take the data from a form where I add the name, surname and age of a person, create a list of the people I add and after that, make an age comparison to show the user who is the oldest person.

I already managed to make the form and add people creating the list.. only this missing make age comparison and show who is the oldest person for the user.

In this link I left a video with my more explicit doubt for you to understand a little better, what I’m trying to solve. https://youtu.be/KP7rTY710NE

function adicionarPessoa() {
    let nome = document.querySelector("#nome")
    let sobreNome = document.querySelector("#sobreNome")
    let idade = document.querySelector("#idade")
    let lista = document.querySelector("#lista")
    let registro = document.querySelector("#registro")
    registro.textContent = "Registros de:"

    let nomeCompleto = `${nome.value} ${sobreNome.value}: ${idade.value}`
    nome.value = ""
    sobreNome.value = ""
    idade.value = ""

    let pessoaRegistrada = document.createElement("li")
    pessoaRegistrada.textContent = nomeCompleto

    lista.appendChild(pessoaRegistrada)
}

document.querySelector("#botao").addEventListener("click", adicionarPessoa)
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>teste</title>
  </head>

  <body>
    <form>
      <label>
        Nome:
        <input id="nome" type="text" name="nome" />
      </label>

      <label>
        Sobrenome:
        <input id="sobreNome" type="text" name="SobreNome" />
      </label>

      <label>
        Idade:
        <input id="idade" type="number" name="idade" />
      </label>

      <button id="botao" type="button">Adicionar</button>
    </form>

    <p id="registro"></p>

    <ul id="lista"></ul>

    <p id="comparacao"></p>
    <script src="script.js"></script>
  </body>
</html>

javascript

  • go through the list picking up the age attribute and when you have been going through will have an if that will store the age in a variable only when the current age is greater than the one that is already stored

1 answer

2

One option is to create a variable that keeps the older person’s age (you can use one object if you have to store more information about the person).

Thus, we start the value as 0 and, if the person we enter is old greater that the number we have stored, we update the value and the message that informs the older person.

Something like that:

const form = document.getElementById('form');
const oldestPanel = document.getElementById('oldest-panel');

// Variável que utilizaremos para manter a idade da pessoa mais velha:
let oldest = 0;

form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const name = form.elements.name.value;
  const age = parseInt(form.elements.age.value, 10);
  
  // Insira na lista ao invés de dar um `console.log`...
  console.log('Registrado: %s, que tem %d anos.', name, age);

  // Se a idade do indivíduo atual for maior do que a da pessoa mais velha (anterior):
  if (age > oldest) {
    oldest = age;
    oldestPanel.textContent = `A pessoa mais velha (${name}) tem ${age} anos.`;
  }
});
<form id="form">
  <input name="name" type="text" />
  <input name="age" type="number" />
  <input type="submit" value="Enviar" />
</form>

<div id="oldest-panel"></div>

This way you avoid having to scroll through a complete list each time a new person is added. We do a simple check on each new "record".

I didn’t modify your code (I made a new one) to avoid giving you the full answer. That’s just an idea that works for your case.

Browser other questions tagged javascript

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