Bom dia, Boa tarde, Boa noite e Boa madrugada Luiz Paulo!
Notei algumas coisas no seu código, que me chamaram a atenção e algumas delas foi a quantidade de constantes que você estava usando, partindo dessa observação fiz algumas alterações no seu código e acredito que a sua resposta esteja nessas alterações.
Código modificado:
/**
* Eu alterei algumas coisas na função criarIdade, para ela ficar como menos linhas de códigos e também fez com que você usasse menos
* constantes em seu código.
*
* @param input
* @returns Se o valor do input for NaN ela vai retornar falso caso contrario ela retorna a idade.
*
*
*/
const criarIdade = input => {
return isNaN(input) ? false : input;
}
const Salvar = () => {
event.preventDefault()
const tablea = document.querySelector("[data-table]");
const linha = document.createElement("tr");
const conteudo = CriarLinha();
if(typeof conteudo === 'string'){
linha.innerHTML = conteudo;
tablea.appendChild(linha);
}
}
const validarLinha = linha => {
if(typeof linha !== 'object'){
return false;
}
// esse for vai passar por todo o objeto que no nosso caso e a linha.
for(key in linha){
if(key == 'idade'){
if(!linha[key]){
return false;
}
}
}
return true;
}
const CriarLinha = () => {
const novoFuncionarioinput = document.querySelectorAll("[data-form-input]");
/**
* Uma outra mudança foi nos valores, troquei as 5 constantes que você tinha por um objeto contendo as
* informações da linha.
*
*/
const infosrmacoesDaLinha = {
indice: criarIndice(),
nome: criarNome(),
idade: criarIdade(novoFuncionarioinput[1].value),
cargo: criarCargo(),
salario: criarSalario()
}
//Na função validar linha você pode fazer todas as validações necessárias.
if(!validarLinha(infosrmacoesDaLinha)){
Alert("A idade não foi inserida corretamente!");
return false;
}
const conteudo = `
<th class="coluna">${indice}</th>
<th class="coluna">${nome}</th>
<th class="coluna">${idade}</th>
<th class="coluna">${cargo}</th>
<th class="coluna">{salario}</th>
`
return conteudo;
}
A primeira alteração foi na função criarIdade
.
Eu removi todas as constantes que você tinha declarado no escopo dessa função, reduzindo ela para um único If
onde eu basicamente verifico se o valor do input que foi passado como parâmetro da função é NaN
caso essa verificação seja verdadeira a função criarIdade
retorna false
caso contrario ela retorna o valor do input que no nosso caso é um inteiro
pelo fato de ser uma idade.
A segunda alteração foi na função CriarLinha
onde você tinha 5 constantes como os valores que formariam uma linha no final. Eu removi essas constantes e criei uma unica constante que eu chamei de infosrmacoesDaLinha
que é um objeto contendo toda as informações da linha.
A terceira alteração foi a criação de uma função para validar a linha onde eu chamei essa função de validarLinha(linha: Objeto)
. validarLinha é uma função que recebe como parâmetro a nossa linha e esse parâmetro tem que ser um objeto, caso o parâmetro passado não for do tipo Objeto a função validarLinha
retorna false. Caso contrario ela valida as informações da linha e retorna true se tudo estiver ok se ela encontrar algum valor que não era para estar ali, ela retorna false.
Um exemplo foi a validação da idade, onde se a idade for igual a false a função retorna false.
A quarta alteração foi na função CriarLinha
onde eu adicionei somente um If
para verificar o retorno da função validarLinha
caso a função validar linha retorne false a função criarLinha também retornara false, caso retornado true a função criarLinha retornara o conteudo.
A quinta e ultima alteração foi na função salvar onde eu adicionei um If
para verificar o conteúdo onde caso essa variável conteudo não seja do tipo string, o código não adicionara aquela linha a sua tabela, caso contrario será adicionada a linha corretamente