Add a new item to the array list of names

Question

Add a new item to the array list of names

Navigation

#1 by (1 votes)

3

When you click the button, the add () function should be triggered by adding a new item to the list of names based on the input name and rendering the new screen item together with the previous items. But it is creating a new list, I just want to add the item to the list that already exists.

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>

javascript

asked by anonymous 17.11.2018 / 15:37

1 answer

Python - Breaking down text file Why does Illegal invocation occur in JS?

score 1 · Accepted Answer

By doing a appendChild you are adding a new list to the div without removing or replacing the one that is there.

You can do this in two ways:

Method 1: Emptying the div with document.querySelector('#app').innerHTML = ""; before doing appendChild in function 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));
}

Method 2: Directly with innerHTML :

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

Only the list(nomes) function is returning an object with the elements, not the HTML. In this case you should use outerHTML to convert this object to HTML to work with innerHTML .

Examples

Method 1: Emptying the 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>

Method 2: With 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>