JavaScript Array not showing updated element

Question

I am writing a simple program to list some elements from an array and then the user can input a value thats gets pushed to that array, but for some reason the array is not showing the updated array. I can see the additional values getting pushed into it but the UI is not updating? Perhaps it is the order of the code?

code:

// Data structure
const planets = [
  'Mercury', 
  'Venus', 
  'Earth'
];
    
// Loop over array
const func = (arr) => {
let items = '';
for (let i = 0; i < arr.length; i++) {
  items += `<li>${ arr[i] }</li>`;                     
}
  return items;
}


let html = `
<ul>
  ${func(planets)}
</ul>
<button id='myButton'> Add </button>
`;

document.querySelector('main').innerHTML = html;

// add to array
const addFunc = () => {
    const searchQuery = prompt('What do you want to add?');
    const search = newArray.push(searchQuery);
}

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', () => {
  addFunc();                        
});

The code which updates your ui is .innerHTML = html;, which only runs once when the page loads, as it is not inside your addFunc() — Nick Parsons
– Nick Parsons, Commented Jun 24, 2020 at 1:38
you can put the code which creates the html string and performs the .innerHTML into a function of its own (eg: updateUI). You can call this function when the page loads, and also call it once you add an item to your array. Anotther way would be to leave your code as is and use .innerHTML = `<li>${ searchQuery }</li>`; as the last line in your addFunc — Nick Parsons
– Nick Parsons, Commented Jun 24, 2020 at 1:49
@Sole, Does this is what you want? codepen.io/Maniraj_Murugan/pen/ZEQKmge — Maniraj Murugan
– Maniraj Murugan, Commented Jun 24, 2020 at 2:00

Marik Ishtar · Accepted Answer · 2020-06-24 01:58:15Z

2

try this code:

// Data structure
const planets = [
   'Mercury', 
   'Venus', 
   'Earth'
 ];
     
 // Loop over array
 const func = (arr) => {
 let items = '';
 for (let i = 0; i < arr.length; i++) {
   items += `<li>${ arr[i] }</li>`;                     
 }
   return items;
 }
 

 // add to array
 const addFunc = () => {
   const searchQuery = prompt('What do you want to add?');
   planets.push(searchQuery)

   displayHTML()
 }
 
const displayHTML = () => {
   let html = `
   <ul>
     ${func(planets)}
   </ul>
   <button id='myButton' onclick='addFunc()'> Add </button>
   `;
   
   document.querySelector('main').innerHTML = html;
}

displayHTML()

 const myButton = document.getElementById('myButton');
 
 myButton.addEventListener('click', () => {
   addFunc();                        
 });

edited Jun 24, 2020 at 1:58

answered Jun 24, 2020 at 1:49

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

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

3 Comments

Sole Over a year ago

Although thats nearly there, It only runs the click once

Marik Ishtar Over a year ago

you need to remove ` <button id='myButton'> Add </button> ` from js and add it to html

Marik Ishtar Over a year ago

or you can replace <button id='myButton'> Add </button> with <button id='myButton' onclick="addFunc()"> Add </button> in javascript

Maniraj Murugan · Accepted Answer · 2020-06-24 02:24:49Z

1

Make a common function like getHtml(planets) and passdown the array you have on page load.

And this function will generate ul , li via func(planets) and button

And also place the eventlistener here for the add button.

Also modify your addFunc like,

const addFunc = () => {
    const searchQuery = prompt('What do you want to add?');
    planets.push(searchQuery);
    getHtml(planets)
}

Note: You have used newArray in your code but you have not declared that elsewhere but trying to push an element which will trow error.

Working Snippet as follows,

// Data structure
const planets = [
  'Mercury', 
  'Venus', 
  'Earth'
];
    
// Loop over array
const func = (arr) => {
let items = '';
for (let i = 0; i < arr.length; i++) {
  items += `<li>${ arr[i] }</li>`;                     
}
  return items;
}

const getHtml = (planets) =>{
  let html = `
<ul>
  ${func(planets)}
</ul>
<button id='myButton'> Add </button>
`;

  document.querySelector('main').innerHTML = html;

 const myButton = document.getElementById('myButton');
  
  myButton.addEventListener('click', () => {
    addFunc();                        
  });
}

getHtml(planets)

// add to array
const addFunc = () => {
    const searchQuery = prompt('What do you want to add?');
    planets.push(searchQuery);
    getHtml(planets)
}

<main> </main>

answered Jun 24, 2020 at 2:24

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

2 Comments

Sole Over a year ago

Thanks, newArray was left in by mistake

Maniraj Murugan Over a year ago

@Sole, Okay just keep that point in future questions.. Happy coding..

Collectives™ on Stack Overflow

JavaScript Array not showing updated element

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related