3

Ao clicar no botão, a função adicionar() deve ser disparada adicionando um novo item a lista de nomes baseado no nome preenchido no input e renderizando o novo item em tela juntos aos demais itens anteriores. Só que ela está criando uma nova lista, eu só quero adicionar o item a lista que já existe.

var nomes = ['Diego', 'Gabriel', 'Lucas'];
//var btnElement = document.querySelector('button.btn');

function adicionar() {
  var inputElement = document.querySelector("#nome").value;
  //nomes = inputElement;
  nomes.push(inputElement);
  document.querySelector('#app').appendChild(list(nomes));
}

function list(array) {
  //Cria a lista do elemento
  var listElement = document.createElement("ul");

  //listElement.setAttribute('id', 'myList');

  for (var i = 0; i < array.length; i++) {
    //Cria a lista de item
    var itemElement = document.createElement('li');

    //Defini seu conteudo
    itemElement.appendChild(document.createTextNode(array[i]));

    //Adiciona um item a lista
    listElement.appendChild(itemElement);
  }
  return listElement;
}

// Add the contents of options[0] to #foo:
document.querySelector('#app').appendChild(list(nomes));
<div class="container">
  <div class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
      <label class="sr-only">Nome</label>
      <input type="text" class="form-control" id="nome" placeholder="Nome">
    </div>
    <button type="submit" class="btn btn-primary mb-2" onclick="adicionar()">Adicionar</button>
  </div>
  <div id="app"></div>
</div>

1 Resposta 1

1

Fazendo um appendChild você está adicionando uma nova lista na div sem remover ou substituir a que está lá.

Você pode fazer isso de duas formas:

Método 1: Esvaziando a div com document.querySelector('#app').innerHTML = ""; antes de fazer o appendChild na função adicionar():

function adicionar() {
  var inputElement = document.querySelector("#nome").value;
  //nomes = inputElement;
  nomes.push(inputElement);
  document.querySelector('#app').innerHTML = ""; // esvazia a div
  document.querySelector('#app').appendChild(list(nomes));
}

Método 2: Diretamente com innerHTML:

function adicionar() {
  var inputElement = document.querySelector("#nome").value;
  //nomes = inputElement;
  nomes.push(inputElement);
  document.querySelector('#app').innerHTML = list(nomes).outerHTML;
}

Só que a função list(nomes) está retornando um objeto com os elementos e não o HTML. Neste caso você deve usar outerHTML para converter esse objeto em HTML para funcionar com o innerHTML.

Exemplos

Método 1: Esvaziando a div:

var nomes = ['Diego', 'Gabriel', 'Lucas'];
//var btnElement = document.querySelector('button.btn');

function adicionar() {
  var inputElement = document.querySelector("#nome").value;
  //nomes = inputElement;
  nomes.push(inputElement);
  document.querySelector('#app').innerHTML = ""; //  esvazia a div
  document.querySelector('#app').appendChild(list(nomes));
}

function list(array) {
  //Cria a lista do elemento
  var listElement = document.createElement("ul");

  //listElement.setAttribute('id', 'myList');

  for (var i = 0; i < array.length; i++) {
    //Cria a lista de item
    var itemElement = document.createElement('li');

    //Defini seu conteudo
    itemElement.appendChild(document.createTextNode(array[i]));

    //Adiciona um item a lista
    listElement.appendChild(itemElement);
  }
  return listElement;
}

// Add the contents of options[0] to #foo:
document.querySelector('#app').appendChild(list(nomes));
<div class="container">
  <div class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
      <label class="sr-only">Nome</label>
      <input type="text" class="form-control" id="nome" placeholder="Nome">
    </div>
    <button type="submit" class="btn btn-primary mb-2" onclick="adicionar()">Adicionar</button>
  </div>
  <div id="app"></div>
</div>

Método 2: Com innerHTML:

var nomes = ['Diego', 'Gabriel', 'Lucas'];
//var btnElement = document.querySelector('button.btn');

function adicionar() {
  var inputElement = document.querySelector("#nome").value;
  //nomes = inputElement;
  nomes.push(inputElement);
  document.querySelector('#app').innerHTML = list(nomes).outerHTML;
}

function list(array) {
  //Cria a lista do elemento
  var listElement = document.createElement("ul");

  //listElement.setAttribute('id', 'myList');

  for (var i = 0; i < array.length; i++) {
    //Cria a lista de item
    var itemElement = document.createElement('li');

    //Defini seu conteudo
    itemElement.appendChild(document.createTextNode(array[i]));

    //Adiciona um item a lista
    listElement.appendChild(itemElement);
  }
  return listElement;
}

// Add the contents of options[0] to #foo:
document.querySelector('#app').appendChild(list(nomes));
<div class="container">
  <div class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
      <label class="sr-only">Nome</label>
      <input type="text" class="form-control" id="nome" placeholder="Nome">
    </div>
    <button type="submit" class="btn btn-primary mb-2" onclick="adicionar()">Adicionar</button>
  </div>
  <div id="app"></div>
</div>

4
  • 1
    Entendi Sam valeu pela ajuda e pela explicação.
    – Henrique
    Commented 17/11/2018 às 15:39
  • Sam e se eu quisesse limpar o campo após adicionar um novo nome, como faria? Se eu colocar dentro de um form ele atualiza a página após clicar no botão adicionar
    – Henrique
    Commented 17/11/2018 às 15:58
  • Para limpar o campo coloque no final da função: document.querySelector("#nome").value = "";
    – Sam
    Commented 17/11/2018 às 15:59
  • Vc pode colocar dentro de um form caso queira submeter o formulário para alguma coisa, tipo gravar no banco de dados ou enviar para o PHP.
    – Sam
    Commented 17/11/2018 às 16:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .