I want to store my input values into an array.
When i click enter i get the input value and push into vals array.
Then i console log but whenever i click enter, it only push last input value.
Why?
var input = document.getElementById("input");
input.addEventListener("keyup", function(e) {
var val = e.target.value;
var vals = [];
if (e.which == 13) {
vals.push(val);
input.value = " ";
console.log(vals);
}
}, false);
the reason why your code is only displaying the last value is because your array is local to the function hence it only exists while that function is in scope. Rather make it global, that way you can push more than one element into the array and later access it.
var vals = []; //make this global
var input = document.getElementById("input");
input.addEventListener("keyup", function(e) {
var val = e.target.value;
if (e.which == 13) {
vals.push(val);
input.value = " ";
console.log(vals);
}
}, false);
You need to initialize your array only once
var input = document.getElementById("input");
var vals = [];
input.addEventListener("keyup", function(e) {
var val = e.target.value;
if (e.which == 13) {
vals.push(val);
input.value = " ";
console.log(vals);
}
}, false);
Declare the vals array outside of the event listener
var input = document.getElementById("input");
var vals = [];
input.addEventListener("keyup", function(e) {
var val = e.target.value;
if (e.which == 13) {
vals.push(val);
input.value = " ";
console.log(vals);
}
}, false);
valseverytime thekeyuplistener is executed. Move it out of that listener.