CODEWITHSUNDEEP
javascripthtml
Habiba
Habiba

Reputation: 31

Global array remains empty

I am trying to update my global array, but it remains null after I submit a text value(.name) through a submit button.

Please tell me how I can keep track of text values in my global array. Thank you. 

var display_name = [];
document.addEventListener('DOMContentLoaded', () =>{
  document.querySelector("#form1").onsubmit = () => {
    let name = document.querySelector(".name").value;
    display_name.push(name);
};

});

Upvotes: 0

Views: 112

Answers (2)

Muneeb
Muneeb

Reputation: 105

I am see at the moment it's working perfect. but you want add value every time when you click the button. so just changed the type of your <button type="submit"> to <button type="button">

because when you click on submit page automatically reload in html, an the 2nd thing you need to change your event from onsubmit to onclick and your button to it instead of your form.

var display_name = [];

document.addEventListener('DOMContentLoaded', () =>{
  document.querySelector("#button1").onclick = () => {
    let name = document.querySelector(".name").value;
    display_name.push(name);
  };
});

Upvotes: 0

Vince
Vince

Reputation: 4232

When the form is submitted, a new page is loaded. It loads the URL in the action property of the form. So, your variable goes away.

If you don't want that to happen, prevent the form from being submitted with preventDefault.

For example ...

const name_list = [];
window.addEventListener('DOMContentLoaded', (e) => {
  const names = document.querySelector(`.names`);
  const add_button = document.querySelector(`.names--add_button`);
  
  names.addEventListener('submit', e => e.preventDefault());
  add_button.addEventListener('click', (e) => {
    const name = document.querySelector(`.names--name`);
    const collected = document.querySelector(`.names--collected`);
    
    name_list.push(name.value);
    
    collected.innerHTML += `<li>${name.value}</li>`;
    
    name.value = ``;
    name.focus();
  });
});
body { background: snow; }
<form class="names" action="#" method="post">
  <label>Name: <input type="text" name="name" class="names--name"></label>
  <button class="names--add_button">Add To List</button>
  
  <div>Names Collected:</div>
  <ul class="names--collected">
  </ul>
</form>

Upvotes: 1

Related Questions