Check whether multiple HTML elements contain a specific text value

Asked

Viewed 41 times

0

I want to verify if the elements inserted in inputs already exist in some table field where the class is called "code".

I created a variable to contain all the code classes to then check.

let codigos = document.querySelectorAll(".codigo")

In the "//new table creation" part of checks (ifs) the condition that is as

else if (codigos.contains(id)) { window.alert("Id já cadastrado") }

Follow the entire project code for testing:

let botaoInserirPessoa = document.querySelector("#inserirPessoa");
let tabela = document.querySelector("#cadastrosPessoa")
let codigos = document.querySelectorAll(".codigo")

let campoId = document.querySelector("#id")
let campoNome = document.querySelector("#nome")
let campoCpf = document.querySelector("#cpf")
let campoRg = document.querySelector("#rg")
let campoNascimento = document.querySelector("#dataNascimento")
let campoSexo = document.querySelector("#sexo")

let bancoDeCadastros = [
  {
    "id": 1,
    "nome": "Francisca Julia da Costa",
    "cpf": "457.696.936-65",
    "rg": "47.360.897-2",
    "data_nasc": "23/03/1944",
    "sexo": "Feminino"
  },
  {
    "id": 2,
    "nome": "Noah Felipe Silva",
    "cpf": "956.531.431-70",
    "rg": "40.974.782-8",
    "data_nasc": "11/07/1964",
    "sexo": "Masculino"
  },
  {
    "id": 3,
    "nome": "Alícia Rosângela Melo",
    "cpf": "066.291.353-18",
    "rg": "36.214.141-1",
    "data_nasc": "18/02/1978",
    "sexo": "Feminino"
  },
  {
    "id": 4,
    "nome": "Cristiane Renata Ana das Neves",
    "cpf": "946.074.401-08",
    "rg": "32.301.736-8",
    "data_nasc": "10/05/1966",
    "sexo": "Feminino"
  },
  {
    "id": 5,
    "nome": "Priscila Benedita Vanessa Ferreira",
    "cpf": "888.282.394-68",
    "rg": "44.524.670-4",
    "data_nasc": "15/11/1966",
    "sexo": "Feminino"
  },
  {
    "id": 6,
    "nome": "Bianca Carolina Nunes",
    "cpf": "484.323.140-13",
    "rg": "44.466.563-8",
    "data_nasc": "16/03/1948",
    "sexo": "Feminino"
  },
  {
    "id": 7,
    "nome": "Yuri Vicente Manuel Silveira",
    "cpf": "250.111.093-56",
    "rg": "18.597.361-9",
    "data_nasc": "05/09/1974",
    "sexo": "Masculino"
  },
  {
    "id": 8,
    "nome": "Melissa Alessandra Barros",
    "cpf": "446.675.916-25",
    "rg": "25.598.673-7",
    "data_nasc": "13/01/2000",
    "sexo": "Feminino"
  },
  {
    "id": 9,
    "nome": "Márcia Daniela Lara da Cruz",
    "cpf": "932.803.826-02",
    "rg": "40.653.176-6",
    "data_nasc": "04/06/1986",
    "sexo": "Feminino"
  },
  {
    "id": 10,
    "nome": "Filipe Anderson Rafael Assis",
    "cpf": "704.869.005-41",
    "rg": "39.383.334-3",
    "data_nasc": "19/11/1995",
    "sexo": "Masculino"
  },
  {
    "id": 11,
    "nome": "Luís Vinicius Sebastião Jesus",
    "cpf": "035.960.588-56",
    "rg": "29.915.692-8",
    "data_nasc": "23/04/1965",
    "sexo": "Masculino"
  },
  {
    "id": 12,
    "nome": "Cecília Caroline Nascimento",
    "cpf": "034.396.672-78",
    "rg": "48.673.066-9",
    "data_nasc": "04/02/1951",
    "sexo": "Feminino"
  },
  {
    "id": 13,
    "nome": "Raimunda Sandra Ferreira",
    "cpf": "757.187.891-85",
    "rg": "21.189.806-5",
    "data_nasc": "17/11/1974",
    "sexo": "Feminino"
  },
  {
    "id": 14,
    "nome": "Andreia Isabelly Juliana Melo",
    "cpf": "736.348.985-85",
    "rg": "24.677.018-1",
    "data_nasc": "11/10/1963",
    "sexo": "Feminino"
  },
  {
    "id": 15,
    "nome": "Nicolas Bernardo Moura",
    "cpf": "061.370.865-26",
    "rg": "16.302.343-8",
    "data_nasc": "08/06/1989",
    "sexo": "Masculino"
  },
  {
    "id": 16,
    "nome": "Diego Benjamin Tiago da Luz",
    "cpf": "991.152.443-42",
    "rg": "38.315.100-4",
    "data_nasc": "04/06/1990",
    "sexo": "Masculino"
  },
  {
    "id": 17,
    "nome": "Marlene Emanuelly Yasmin Cavalcanti",
    "cpf": "781.233.625-52",
    "rg": "21.068.742-3",
    "data_nasc": "15/10/1961",
    "sexo": "Feminino"
  },
  {
    "id": 18,
    "nome": "Vanessa Isabela da Luz",
    "cpf": "872.138.490-85",
    "rg": "44.289.193-3",
    "data_nasc": "05/09/1982",
    "sexo": "Feminino"
  },
  {
    "id": 19,
    "nome": "Camila Flávia Vera Mendes",
    "cpf": "790.524.518-77",
    "rg": "40.847.994-2",
    "data_nasc": "01/07/1952",
    "sexo": "Feminino"
  },
  {
    "id": 20,
    "nome": "Luana Lívia Lara Campos",
    "cpf": "532.901.056-01",
    "rg": "14.732.946-2",
    "data_nasc": "19/08/1981",
    "sexo": "Feminino"
  },
  {
    "id": 21,
    "nome": "Josefa Nina Galvão",
    "cpf": "379.743.833-80",
    "rg": "13.878.690-2",
    "data_nasc": "27/01/1943",
    "sexo": "Feminino"
  },
  {
    "id": 22,
    "nome": "Natália Isabelly Silvana da Paz",
    "cpf": "454.172.867-29",
    "rg": "22.986.096-5",
    "data_nasc": "17/09/1980",
    "sexo": "Feminino"
  },
  {
    "id": 23,
    "nome": "Amanda Sebastiana Vieira",
    "cpf": "703.941.038-90",
    "rg": "50.251.196-5",
    "data_nasc": "08/06/1960",
    "sexo": "Feminino"
  },
  {
    "id": 24,
    "nome": "Noah Pedro Alves",
    "cpf": "074.733.106-58",
    "rg": "32.110.015-3",
    "data_nasc": "14/08/1992",
    "sexo": "Masculino"
  },
  {
    "id": 25,
    "nome": "Giovana Camila da Conceição",
    "cpf": "418.746.840-49",
    "rg": "35.520.215-3",
    "data_nasc": "25/06/1947",
    "sexo": "Feminino"
  },
  {
    "id": 26,
    "nome": "Pietro Joaquim Emanuel Gonçalves",
    "cpf": "003.502.230-25",
    "rg": "12.099.068-4",
    "data_nasc": "21/04/1999",
    "sexo": "Masculino"
  },
  {
    "id": 27,
    "nome": "Tereza Kamilly Mariana Porto",
    "cpf": "050.946.705-90",
    "rg": "39.830.941-3",
    "data_nasc": "16/06/1959",
    "sexo": "Feminino"
  },
  {
    "id": 28,
    "nome": "Caroline Emanuelly Lívia Moreira",
    "cpf": "673.831.546-57",
    "rg": "24.561.727-9",
    "data_nasc": "09/04/1948",
    "sexo": "Feminino"
  },
  {
    "id": 29,
    "nome": "Gabriel Ricardo da Paz",
    "cpf": "829.270.172-98",
    "rg": "30.407.114-6",
    "data_nasc": "24/03/1980",
    "sexo": "Masculino"
  },
  {
    "id": 30,
    "nome": "Giovanni Igor Augusto Pires",
    "cpf": "584.880.490-72",
    "rg": "33.874.271-2",
    "data_nasc": "24/08/1946",
    "sexo": "Masculino"
  }
]

//função que transforma todos dados pessoais na tabela editáveis.
let permitirEdicaoDados = ()=>{
  
  let dadosCadastrados = document.querySelectorAll(".dPessoa")
  
  dadosCadastrados.forEach(dado =>{
    dado.setAttribute("contenteditable", true)
  
  })
}

//função que adiciona o evento excluir ao botão lixeira.
let eventoBotaoExcluir = ()=>{
  
  let botaoExcluir = document.querySelectorAll('.material-icons')
  botaoExcluir.forEach((botao) => {
  
    botao.addEventListener('click', () => {
      let idLinha = botao.getAttribute('data-id')
      
      document.getElementById(`${idLinha}`).remove()
    })
  })
}

//função que inclui os cadastros já existentes na base de dados
let renderizarCadastros = banco =>{
    
  for (let i=0; i<bancoDeCadastros.length; i++){    
      
      let novaTabela = `<tr id="${banco[i].id}">  
                          <td class="codigo">${banco[i].id}</td>
                          <td class="dPessoa">${banco[i].nome}</td>
                          <td class="dPessoa">${banco[i].cpf}</td>
                          <td class="dPessoa">${banco[i].rg}</td>
                          <td class="dPessoa">${banco[i].data_nasc}</td>
                          <td class="dPessoa">${banco[i].sexo}</td>
                          <td class="material-icons" data-id="${banco[i].id}">delete_forever</td>
                      </tr>`
                      
      tabela.innerHTML += novaTabela
  }
}

let limparCamposFormulario = ()=>{
  campoId.value = ""
  campoNome.value = ""
  campoCpf.value = ""
  campoRg.value = ""
  campoNascimento.value = "" 
  campoSexo.value = ""
}

//criação de uma nova tabela
botaoInserirPessoa.addEventListener("click", ()=>{
  
  let id = campoId.value
  let nome = campoNome.value
  let cpf = campoCpf.value
  let rg = campoRg.value
  let nascimento = campoNascimento.value
  let sexo = campoSexo.value

  if(id == "" || nome == "" || cpf == "" || rg == "" || nascimento == "" || sexo == ""){
    
    window.alert("Preencha todos os campos")

  }
  
  else if(tabelaTd.classList.contains(id)){
    
    window.alert("Id já cadastrado")
    
  }

  else{
    
    let novaTabela = `<tr id="${id}">  
                        <td class="codigo">${id}</td>
                        <td class="dPessoa">${nome}</td>
                        <td class="dPessoa">${cpf}</td>
                        <td class="dPessoa">${rg}</td>
                        <td class="dPessoa">${nascimento}</td>
                        <td class="dPessoa">${sexo}</td>
                        <td class="material-icons" data-id="${id}">delete_forever</td>
                      </tr>`          
   
  tabela.innerHTML += novaTabela

  let novoCadastro = {
    id: id,
    nome: nome,
    cpf: cpf,
    rg: rg,
    data_nasc: nascimento,
    sexo: sexo,
  }
  
  bancoDeCadastros.push(novoCadastro)
  
  limparCamposFormulario()
  eventoBotaoExcluir()
  permitirEdicaoDados()
  }

})

renderizarCadastros(bancoDeCadastros)
eventoBotaoExcluir()
permitirEdicaoDados()
/*Root*/
*{
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-family: Roboto;
    color: rgb(51, 51, 51);
}

/*Container principal*/
#container{
    text-align: center;
    align-items: center;
    margin: 15px;
}

/*Campos do formulário*/
#inserirDados div, input, button{
    margin: 5px 0 5px 0;
    padding: 3px;
}

#inserirDados input{
    width: 120px;
}

#inserirDados button{
    width: 60px;
    border: 0;
    border-radius: 8px;
    
    color: rgb(248, 248, 248);
    background-color: rgb(38, 98, 230);

    transition: .3s;
}
#inserirDados button:hover {
    cursor: pointer;
    background-color: rgb(42, 89, 190);
    transition: .3s;
}

/*Tabela*/
#cadastrosPessoa{
    margin: auto;
    border-collapse: collapse;
    text-align: left;
}

#cadastrosPessoa tr{
    transition: .2s;
}

#cadastrosPessoa tr:hover{
    background-color: rgb(235, 235, 235);
    transition: .2s;
}

#cadastrosPessoa th{
    border: 0;
}

#cadastrosPessoa td{
    border-bottom: 1px solid  rgb(51, 233, 111);
    font-weight: normal;

    padding: 5px;
}

#cadastrosPessoa .material-icons{
    cursor:pointer;
    display: contents;
    
    transition: .3s;
}

#cadastrosPessoa .material-icons:hover{
    
    color: tomato;
    transition: .3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listagem de pessoas</title>
</head>
<body>
    
    <div id="container">
        <div id="inserirDados">
            <h1>Adicionar colaborador</h1>
            <input type="text" name="id" id="id" placeholder="ID">
            <input type="text" name="nome" id="nome" placeholder="Nome">
            <input type="text" name="cpf" id="cpf" placeholder="CPF">
            <input type="text" name="rg" id="rg" placeholder="RG">
            <input type="text" name="dataNascimento" id="dataNascimento" placeholder="Nascimento">
            <input type="text" name="sexo" id="sexo" placeholder="Sexo">
            <br>
            <button id="inserirPessoa">OK</button>
        </div>
    </div>
        
    <table id="cadastrosPessoa">
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>CPF</th>
            <th>RG</th>
            <th>Nascimento</th>
            <th>Sexo</th>
            <th></th>
        </tr>
    </table>
        
</body>

<script src="/scripts.js"></script>

<link rel="stylesheet" href="/main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

</html>

javascript html

1 answer

2


It is always good to separate the functionalities of your code and specific functions. In your case it would be good to create a function that only checks if any id has already been registered and at the time of inserting a new item in the table, run the function that checks if the id informed already exists.

I’ll create a function called checkIdAlreadyExist(id) where she receives the id of the item that will be registered and check if it already exists. I’ll put the code and the explanations:

Code:

function checkIdAlreadyExist(id) {
  const trs = document.querySelectorAll('tr');
  const idsArray = [];

  trs.forEach((tr) => {
    idsArray.push(tr.getAttribute('id'));
  });

  if (idsArray.includes(id)) {
    return true;
  } else {
    return false;
  }
}

Explanations:

  • const trs = document.querySelectorAll('tr'); selects all elements that are a <tr>
  • const idsArray = []; array we will use to store the ids
  • In the code below, let’s iterate over all the elements tr and let’s "take" the attribute id of each of them using getAttribute and add them to the array of idthe ones we create (idsArray):
  trs.forEach((tr) => {
   idsArray.push(tr.getAttribute('id'));
  })
  • if (idsArray.includes(id)) {...} here we make the check to see if the id already exists, through the method includes, where he returns true or false.

This is the function and it serves only for this and Voce will call it inside the function that adds a new item in the table. Based on her return, Voce decides what to do. In your case send a message to the user.

Enter this function call inside your if, thus:

...
else if (checkIdAlreadyExist(id)) {
        window.alert('Id já cadastrado');
      }
....

How about your full code:

    let botaoInserirPessoa = document.querySelector('#inserirPessoa');
    let tabela = document.querySelector('#cadastrosPessoa');
    let codigos = document.querySelectorAll('.codigo');

    let campoId = document.querySelector('#id');
    let campoNome = document.querySelector('#nome');
    let campoCpf = document.querySelector('#cpf');
    let campoRg = document.querySelector('#rg');
    let campoNascimento = document.querySelector('#dataNascimento');
    let campoSexo = document.querySelector('#sexo');

    let bancoDeCadastros = [
      {
        id: 1,
        nome: 'Francisca Julia da Costa',
        cpf: '457.696.936-65',
        rg: '47.360.897-2',
        data_nasc: '23/03/1944',
        sexo: 'Feminino',
      },
      {
        id: 2,
        nome: 'Noah Felipe Silva',
        cpf: '956.531.431-70',
        rg: '40.974.782-8',
        data_nasc: '11/07/1964',
        sexo: 'Masculino',
      },
      {
        id: 3,
        nome: 'Alícia Rosângela Melo',
        cpf: '066.291.353-18',
        rg: '36.214.141-1',
        data_nasc: '18/02/1978',
        sexo: 'Feminino',
      },
      {
        id: 4,
        nome: 'Cristiane Renata Ana das Neves',
        cpf: '946.074.401-08',
        rg: '32.301.736-8',
        data_nasc: '10/05/1966',
        sexo: 'Feminino',
      },
      {
        id: 5,
        nome: 'Priscila Benedita Vanessa Ferreira',
        cpf: '888.282.394-68',
        rg: '44.524.670-4',
        data_nasc: '15/11/1966',
        sexo: 'Feminino',
      },
      {
        id: 6,
        nome: 'Bianca Carolina Nunes',
        cpf: '484.323.140-13',
        rg: '44.466.563-8',
        data_nasc: '16/03/1948',
        sexo: 'Feminino',
      },
      {
        id: 7,
        nome: 'Yuri Vicente Manuel Silveira',
        cpf: '250.111.093-56',
        rg: '18.597.361-9',
        data_nasc: '05/09/1974',
        sexo: 'Masculino',
      },
      {
        id: 8,
        nome: 'Melissa Alessandra Barros',
        cpf: '446.675.916-25',
        rg: '25.598.673-7',
        data_nasc: '13/01/2000',
        sexo: 'Feminino',
      },
      {
        id: 9,
        nome: 'Márcia Daniela Lara da Cruz',
        cpf: '932.803.826-02',
        rg: '40.653.176-6',
        data_nasc: '04/06/1986',
        sexo: 'Feminino',
      },
      {
        id: 10,
        nome: 'Filipe Anderson Rafael Assis',
        cpf: '704.869.005-41',
        rg: '39.383.334-3',
        data_nasc: '19/11/1995',
        sexo: 'Masculino',
      },
      {
        id: 11,
        nome: 'Luís Vinicius Sebastião Jesus',
        cpf: '035.960.588-56',
        rg: '29.915.692-8',
        data_nasc: '23/04/1965',
        sexo: 'Masculino',
      },
      {
        id: 12,
        nome: 'Cecília Caroline Nascimento',
        cpf: '034.396.672-78',
        rg: '48.673.066-9',
        data_nasc: '04/02/1951',
        sexo: 'Feminino',
      },
      {
        id: 13,
        nome: 'Raimunda Sandra Ferreira',
        cpf: '757.187.891-85',
        rg: '21.189.806-5',
        data_nasc: '17/11/1974',
        sexo: 'Feminino',
      },
      {
        id: 14,
        nome: 'Andreia Isabelly Juliana Melo',
        cpf: '736.348.985-85',
        rg: '24.677.018-1',
        data_nasc: '11/10/1963',
        sexo: 'Feminino',
      },
      {
        id: 15,
        nome: 'Nicolas Bernardo Moura',
        cpf: '061.370.865-26',
        rg: '16.302.343-8',
        data_nasc: '08/06/1989',
        sexo: 'Masculino',
      },
      {
        id: 16,
        nome: 'Diego Benjamin Tiago da Luz',
        cpf: '991.152.443-42',
        rg: '38.315.100-4',
        data_nasc: '04/06/1990',
        sexo: 'Masculino',
      },
      {
        id: 17,
        nome: 'Marlene Emanuelly Yasmin Cavalcanti',
        cpf: '781.233.625-52',
        rg: '21.068.742-3',
        data_nasc: '05/09/1982',
        sexo: 'Feminino',
      },
      {
        id: 18,
        nome: 'Vanessa Isabela da Luz',
        cpf: '872.138.490-85',
        rg: '44.289.193-3',
        data_nasc: '05/09/1982',
        sexo: 'Feminino',
      },
      {
        id: 19,
        nome: 'Camila Flávia Vera Mendes',
        cpf: '790.524.518-77',
        rg: '40.847.994-2',
        data_nasc: '01/07/1952',
        sexo: 'Feminino',
      },
      {
        id: 20,
        nome: 'Luana Lívia Lara Campos',
        cpf: '532.901.056-01',
        rg: '14.732.946-2',
        data_nasc: '19/08/1981',
        sexo: 'Feminino',
      },
      {
        id: 21,
        nome: 'Josefa Nina Galvão',
        cpf: '379.743.833-80',
        rg: '13.878.690-2',
        data_nasc: '27/01/1943',
        sexo: 'Feminino',
      },
      {
        id: 22,
        nome: 'Natália Isabelly Silvana da Paz',
        cpf: '454.172.867-29',
        rg: '22.986.096-5',
        data_nasc: '17/09/1980',
        sexo: 'Feminino',
      },
      {
        id: 23,
        nome: 'Amanda Sebastiana Vieira',
        cpf: '703.941.038-90',
        rg: '50.251.196-5',
        data_nasc: '08/06/1960',
        sexo: 'Feminino',
      },
      {
        id: 24,
        nome: 'Noah Pedro Alves',
        cpf: '074.733.106-58',
        rg: '32.110.015-3',
        data_nasc: '14/08/1992',
        sexo: 'Masculino',
      },
      {
        id: 25,
        nome: 'Giovana Camila da Conceição',
        cpf: '418.746.840-49',
        rg: '35.520.215-3',
        data_nasc: '25/06/1947',
        sexo: 'Feminino',
      },
      {
        id: 26,
        nome: 'Pietro Joaquim Emanuel Gonçalves',
        cpf: '003.502.230-25',
        rg: '12.099.068-4',
        data_nasc: '21/04/1999',
        sexo: 'Masculino',
      },
      {
        id: 27,
        nome: 'Tereza Kamilly Mariana Porto',
        cpf: '050.946.705-90',
        rg: '39.830.941-3',
        data_nasc: '16/06/1959',
        sexo: 'Feminino',
      },
      {
        id: 28,
        nome: 'Caroline Emanuelly Lívia Moreira',
        cpf: '673.831.546-57',
        rg: '24.561.727-9',
        data_nasc: '09/04/1948',
        sexo: 'Feminino',
      },
      {
        id: 29,
        nome: 'Gabriel Ricardo da Paz',
        cpf: '829.270.172-98',
        rg: '30.407.114-6',
        data_nasc: '24/03/1980',
        sexo: 'Masculino',
      },
      {
        id: 30,
        nome: 'Giovanni Igor Augusto Pires',
        cpf: '584.880.490-72',
        rg: '33.874.271-2',
        data_nasc: '24/08/1946',
        sexo: 'Masculino',
      },
    ];

    //função que transforma todos dados pessoais na tabela editáveis.
    let permitirEdicaoDados = () => {
      let dadosCadastrados = document.querySelectorAll('.dPessoa');

      dadosCadastrados.forEach((dado) => {
        dado.setAttribute('contenteditable', true);
      });
    };

    //função que adiciona o evento excluir ao botão lixeira.
    let eventoBotaoExcluir = () => {
      let botaoExcluir = document.querySelectorAll('.material-icons');
      botaoExcluir.forEach((botao) => {
        botao.addEventListener('click', () => {
          let idLinha = botao.getAttribute('data-id');

          document.getElementById(`${idLinha}`).remove();
        });
      });
    };

    //função que inclui os cadastros já existentes na base de dados
    let renderizarCadastros = (banco) => {
      for (let i = 0; i < bancoDeCadastros.length; i++) {
        let novaTabela = `<tr id="${banco[i].id}">
                              <td class="codigo">${banco[i].id}</td>
                              <td class="dPessoa">${banco[i].nome}</td>
                              <td class="dPessoa">${banco[i].cpf}</td>
                              <td class="dPessoa">${banco[i].rg}</td>
                              <td class="dPessoa">${banco[i].data_nasc}</td>
                              <td class="dPessoa">${banco[i].sexo}</td>
                              <td class="material-icons" data-id="${banco[i].id}">delete_forever</td>
                          </tr>`;

        tabela.innerHTML += novaTabela;
      }
    };

    let limparCamposFormulario = () => {
      campoId.value = '';
      campoNome.value = '';
      campoCpf.value = '';
      campoRg.value = '';
      campoNascimento.value = '';
      campoSexo.value = '';
    };

    function checkIdAlreadyExist(id) {
      const trs = document.querySelectorAll('tr');
      const idsArray = [];

      trs.forEach((tr) => {
        idsArray.push(tr.getAttribute('id'));
      });

      if (idsArray.includes(id)) {
        return true;
      } else {
        return false;
      }
    }

    //criação de uma nova tabela
    botaoInserirPessoa.addEventListener('click', () => {
      let id = campoId.value;
      let nome = campoNome.value;
      let cpf = campoCpf.value;
      let rg = campoRg.value;
      let nascimento = campoNascimento.value;
      let sexo = campoSexo.value;

      if (
        id == '' ||
        nome == '' ||
        cpf == '' ||
        rg == '' ||
        nascimento == '' ||
        sexo == ''
      ) {
        window.alert('Preencha todos os campos');
      } else if (checkIdAlreadyExist(id)) {
        window.alert('Id já cadastrado');
      } else {
        let novaTabela = `<tr id="${id}">
                            <td class="codigo">${id}</td>
                            <td class="dPessoa">${nome}</td>
                            <td class="dPessoa">${cpf}</td>
                            <td class="dPessoa">${rg}</td>
                            <td class="dPessoa">${nascimento}</td>
                            <td class="dPessoa">${sexo}</td>
                            <td class="material-icons" data-id="${id}">delete_forever</td>
                          </tr>`;

        tabela.innerHTML += novaTabela;

        let novoCadastro = {
          id: id,
          nome: nome,
          cpf: cpf,
          rg: rg,
          data_nasc: nascimento,
          sexo: sexo,
        };

        bancoDeCadastros.push(novoCadastro);

        limparCamposFormulario();
        eventoBotaoExcluir();
        permitirEdicaoDados();
      }
    });

    renderizarCadastros(bancoDeCadastros);
    eventoBotaoExcluir();
    permitirEdicaoDados();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Listagem de pessoas</title>
  </head>
  <body>
    <div id="container">
      <div id="inserirDados">
        <h1>Adicionar colaborador</h1>
        <input type="text" name="id" id="id" placeholder="ID" />
        <input type="text" name="nome" id="nome" placeholder="Nome" />
        <input type="text" name="cpf" id="cpf" placeholder="CPF" />
        <input type="text" name="rg" id="rg" placeholder="RG" />
        <input
          type="text"
          name="dataNascimento"
          id="dataNascimento"
          placeholder="Nascimento"
        />
        <input type="text" name="sexo" id="sexo" placeholder="Sexo" />
        <br />
        <button id="inserirPessoa">OK</button>
      </div>
    </div>

    <table id="cadastrosPessoa">
      <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>CPF</th>
        <th>RG</th>
        <th>Nascimento</th>
        <th>Sexo</th>
        <th></th>
      </tr>
    </table>
  </body>

  <link rel="stylesheet" href="/main.css" />
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  />
</html>

I didn’t add the CSS as that’s beside the point.

This is just a hint of what you can do, now just adapt to your code using the variable codigo.

  • 1

    Hello @Cmtecardeal, again your code was of a huge help to me, I confess that this your logic creating the function to discover the duplicity of the ID is a little beyond my ability, so I will study this your code. Thank you again for your help, thank you very much!!!

  • 1

    Don’t worry, as you study and practice, you will realize that your logic will improve and you will be able to solve problems much more easily.

Browser other questions tagged javascript html

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