Update array with add method in javascript

Question

I have a static array, that I loop through to display three columns.

Boys, Girls and All.

So far I have added a looping method that displays all the elements in the array as such:

  boys.forEach(function(boy) {
  strboy += '<li>'+ boy + '</li>';
  }); 

 strboy += '</ul>';
 document.getElementById("boys").innerHTML = strboy;

this works fine, the issue comes, when I want the user to add another element to the array. I have made a function as such

function addboy(){
var boy=document.getElementById('newboy').value
  boys.push(boy);
  console.log(boys);
}

this works, and the new array is logged to the console, but how can I update the UI, after the user added a new element. I tried not using an anonymous function, but then the entire new array got displayed again, I only want the new array to be displayed. I would prefer this with just Vanilla JavaScript and without JQuery.

Wrap your first code in a function and run that function again to update the UI. — Adrian
– Adrian, Commented Sep 5, 2018 at 13:51
The problem with this is that the entire array is displayed once again, not just the new array. Even if I call the function upon window.onload(). — Kristoffer Tølbøll
– Kristoffer Tølbøll, Commented Sep 5, 2018 at 13:52

Luis felipe De jesus Munoz · Accepted Answer · 2018-09-05 14:00:04Z

1

Put your code in a function an simply call it every time you add a new boy

boys = ['Mario', 'Pepe']
function updateUi() {
  strboy = '<ul>';
  boys.forEach(function(boy) {
    strboy += '<li>' + boy + '</li>';
  });

  strboy += '</ul>';
  document.getElementById("boys").innerHTML = strboy;
}


function addboy() {
  var boy = 'Jhon Doe'
  boys.push(boy);
  updateUi()
}

updateUi()

<div id="boys"> </div>
<button onclick="addboy()">add boy</button>

Without redrawing the array ->

boys = ['Mario', 'Pepe']
function updateUi() {
  strboy = '<ul id="boysUl">';
  boys.forEach(function(boy) {
    strboy += '<li>' + boy + '</li>';
  });

  strboy += '</ul>';
  document.getElementById("boys").innerHTML = strboy;
}


function addboy() {
  var boy = 'Jhon Doe'
  boys.push(boy);
  document.getElementById("boysUl").innerHTML += '<li>' + boy + '</li>';
}

updateUi()

<div id="boys"> </div>
<button onclick="addboy()">add boy</button>

edited Sep 5, 2018 at 14:00

answered Sep 5, 2018 at 13:53

Luis felipe De jesus Munoz

8,0133 gold badges38 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GameTag Over a year ago

@baileyhaldwin this method gonna help you : Element.insertAdjacentHTML() perfect to append a piece of HTML where you want. developer.mozilla.org/en-US/docs/Web/API/Element/…

Orelsanpls · Accepted Answer · 2018-09-05 14:01:38Z

Using ES6

/**
 * Initialize the boys list, using given boys
 */
function init(initialBoys) {
  const str = initialBoys.reduce((tmp, x) => `${tmp} <li>${x}</li>`, '');

  document.getElementById('boys').innerHTML = str;
}

/**
 * Generate a random number between 0 and max
 */
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

/**
 * Add a new boy in the list, pick up a boy from a predefined list
 * Pick it up randomly
 */
function addRandomNewBoy() {
  const availableBoys = [
    'Christian',
    'Amir',
    'Julian',
    'Rorelio',
    'Juan',
    'Grégory',
    'Santa claus',
    'Little Mouse',
    'Your mum',
  ];

  addBoy(availableBoys[getRandomInt(availableBoys.length - 1)]);
}

/**
 * Add a boy to the list
 */
function addBoy(boy) {
  let str = document.getElementById('boys').innerHTML;

  str = `${str} <li>${boy}</li>`;

  document.getElementById('boys').innerHTML = str;
}

/**
 * launch the initialization of the boys list
 */
init([
  'David',
  'Eliot',
]);

<ul id='boys'>
</ul>

<button onclick="addRandomNewBoy()">Add a good boi</button>

Franceso Russo · Accepted Answer · 2018-09-05 13:58:56Z

0

You have not to redraw all. Just add an element! So, without jQuery, you can write(if 'boys' is ul id)

function addBoy(boy){
    let currentBoys = document.getElementById("boys").innerHTML;
    document.getElementById("boys").innerHTML = currentBoys + '<li>' + boy + '</li>';
}

answered Sep 5, 2018 at 13:58

Franceso Russo

535 bronze badges

Collectives™ on Stack Overflow

Update array with add method in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related