Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como fazer novos elementos reconhecer script

por Gustavo Galdino
| 97.2k xp | 2 posts
Logistica

Ola Pessoal, tudo joia?

Estou fazendo meu primeiro projeto e travei nessa parte, não estou conseguindo fazer a segunda tabela funcionar como a primeira, acredito que o problema esta sendo pois apenas o id da primeira tabela esta sendo reconhecido.

Quando coloco o onclick no html as novas tabelas criadas adicionam lista na primeira tabela.

Quero que cada tabela crie uma lista do que é digitado no input.

Site:

Imagem das tabelas no siteHTML:

<main id="main">
      <div class="container p-3 mb-2 bg-dark text-white rounded">
        <div class="input-group mb-3">
            <input type="text" id="inputAdcAlimento" class="form-control" placeholder="Adicione um alimento" aria-label="Adicione um alimento" aria-describedby="basic-addon2">
            <div class="input-group-append">
              <button id="adcAlimento" class="btn btn-success" type="button">OK</button>
            </div>
          </div>
        <ul id="listaAlimentos">Refeição 1</ul>
    </div>

    <div class="container p-3 mb-2 bg-dark text-white rounded">
      <div class="input-group mb-3">
          <input type="text" id="inputAdcAlimento" class="form-control" placeholder="Adicione um alimento" aria-label="Adicione um alimento" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button id="adcAlimento" class="btn btn-success" type="button">OK</button>
          </div>
        </div>
      <ul id="listaAlimentos">Refeição 1</ul>
  </div>

        <div class="container mb-3">
          <button id="btnAdcRefeicao" onclick="adicionaNovaRefeicao()">Adicionar Refeição</button>
        </div>

    </main>

JS

let adcAlimento = document.getElementById('adcAlimento');
let inputAdcAlimento = document.getElementById('inputAdcAlimento');
let listaAlimentos = document.getElementById('listaAlimentos');

// function btnAlimento() {
//     let alimento = {
//         nome: this.inputAdcAlimento.value,
//     }
//     adicionarAlimento(alimento);
//     this.inputAdcAlimento.value = '';
// }

adcAlimento.onclick = () => {
        let alimento = {
        nome: this.inputAdcAlimento.value,
    }
    adicionarAlimento(alimento);
    this.inputAdcAlimento.value = '';
}

// inputAdcAlimento.addEventListener('keypress', (e) => {
//     if (e.keyCode == 13) {
//         let alimento = {
//             nome: inputAdcAlimento.value,
//         }
//         adicionarAlimento(alimento);
//         inputAdcAlimento.value = '';
//     }
// })

function criarListaAlimento(alimento) {
    let li = document.createElement('li');
    li.innerHTML = alimento.nome;

    let div = document.createElement('div');
    div.classList.add('d-flex');
    div.classList.add('justify-content-between');
    div.classList.add('mt-2');

    let divBtn = document.createElement('div');

    let btnEditar = document.createElement('button');
    btnEditar.innerHTML = '<i class="bi bi-pencil-fill"></i>';
    btnEditar.classList.add('btn');
    btnEditar.classList.add('btn-primary');
    btnEditar.classList.add('mr-1');

    let btnExcluir = document.createElement('button');
    btnExcluir.innerHTML = '<i class="bi bi-trash-fill"></i>';
    btnExcluir.classList.add('btn');
    btnExcluir.classList.add('btn-danger');

    divBtn.appendChild(btnEditar);
    divBtn.appendChild(btnExcluir);

    div.appendChild(li);
    div.appendChild(divBtn);

    return  div;
}

function adicionarAlimento(alimento) {
    let li = criarListaAlimento(alimento);
    listaAlimentos.appendChild(li);
}
2 respostas
solução!
por DIEGO CARLOS MARTINS GAYOSO
| 118.8k xp | 184 posts
Instrutor

Olá Gustavo, tudo bom?

O que está acontencendo é que o id deve ser único, portanto não pode ser passado mais de uma vez, então o script só considera o que interpretou primeiro.

Depois de algumas tentativa, encontrei uma alternativa que pode te atender melhor.

Criei uma função que escut ao evento de click na página inteira e só faz algo quando um botão é clicado. Abaixo está o código todo comentado para que não fique dúvidas.

const onClick = (event) => { 
    let elemento = event.target;
    // Aqui verifico se o que foi clicado foi um botão e se ele possui essas classes. Classes presentes no botão OK.
    if(elemento.nodeName === 'BUTTON' && elemento.className =="btn btn-success btnAddRefeicao" ){
        // Pegando o id do botão
        let idBtn = event.target.id;
        let btn = document.getElementById(idBtn); 
        // É preciso subir um nó para acessar o input. O parenteElement pega o elemento pai.
        let dadBtn = btn.parentElement;
        // Aqui pegamos o elemento irmão da Div que possui o botão, no caso o input, e pegamos valor do Input.
        let alimento = {
            nome: dadBtn.previousElementSibling.value
        };
        console.log(alimento);

        // Acesso o pai do dadBtn
        let inputGroup = dadBtn.parentElement;
        console.log(inputGroup);
        // Acesso o elemento que vem depois do input-group, no caso a <ul>
        let listaRefeicao = inputGroup.nextElementSibling;
        console.log(listaRefeicao);
        // E aqui criamos a <li>
        let li = criarListaAlimento(alimento);
        // e adicionamos no como filho da <ul>
        listaRefeicao.appendChild(li)

    }
} 
window.addEventListener('click', onClick);

Se ficar alguma dúvida, estou por aqui.

Bons estudos, Gustavo. Abraço.

por Gustavo Galdino
| 97.2k xp | 2 posts
Logistica

Obrigado Diego, acho que entendi o código, e oq estava fazendo de errado kkkk

Adicionei um contador no id dos elementos isso solucionou o problema de estar reconhecendo apenas o primeiro, e adicionei seu código que esta melhor.

Imagem atualizada

Inseri um contador na frente do id para cada um ser único

btn.setAttribute('id', `adcAlimento${id}`)

e também no input para limpar o campo de digitação.

div2.innerHTML = `<input type="text" id="inputAdcAlimento${id}" class="form-control" placeholder="Adicione um alimento" aria-label="Adicione um alimento" aria-describedby="basic-addon2">`;

        let input = document.getElementById(dadBtn.previousElementSibling.id);
        input.value = '';

Obrigado pela ajuda !