I am getting repeated input values as an Output when I am trying to get User Input from Prompt box and showing those input values in an Array
In example - 1 I am getting all the values Entered from the Prompt box.
//Example - 1
document.getElementById("btn").onclick = () => {
let cars = new Array(5);
for(let get = 0 ; get <= 5 ; get++){
cars[get] = prompt("Enter Any Values");
}
for(let show = 0 ; show <= 5 ; show++ ){
document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
}
document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;
}<button id="btn">Click Here</button>
<div id="data1"></div>
<div id="data2"></div>I am Facing a Problem in Example - 2 .please tell me Where I did wrong. Thank You..!
//Example - 2
document.getElementById("btn").onclick = () => {
let cars = new Array(5);
for(let get of cars){
cars[get] = prompt("Enter Any Values");
}
for(let show of cars){
document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
}
document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;
}<button id="btn">Click Here</button>
<div id="data1"></div>
<div id="data2"></div>Solution 1:
for of is for values of array like objectd (and not their indices). MDN website.
You use for in for indices:
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
for (const element in array1) {
console.log(element);
}Now to answer what is happening in your second code:
get is undefined every time inside the loop, because the cars array is empty. So there are no values.
Every time inside your loop this happens :
cars[undefined] = (your prompt answer)
And the value of cars[undefined] is getting overwritten too
At this point cars is an object with a key undefined with value YOURLASTENTEREDVALUE.
Later the for of loop is run over the cars array again to show the values. Now once again show is undefined inside the loop, because cars is still empty.
So every time you are doing cars[undefined] again. But this time you have a value for it, which will be the last value you have answered and that is being shown.
document.getElementById("btn").onclick = () => {
let cars = new Array(3);
for(let get of cars){
console.log(get);
cars[get] = prompt("Enter Any Values");
}
console.log(Object.keys(cars));
console.log(Object.values(cars));
console.log(cars[undefined]);
for(let show of cars){
console.log(show); document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
}
document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;
}<button id="btn">Click Here</button>
<div id="data1"></div>
<div id="data2"></div>EDIT As requested by OP, one way to fix it:
document.getElementById("btn").onclick = () => {
let cars = new Array(3).fill(0);
for(let get in cars){
cars[get] = prompt("Enter Any Values");
}
for(let show in cars){
document.getElementById("data1").innerHTML += `You have Entered : ${cars[show]}<br>`;
}
document.getElementById("data2").innerHTML = `The Total Values are : ${cars}`;
}<button id="btn">Click Here</button>
<div id="data1"></div>
<div id="data2"></div>Filling array with default 0s initially so they can be iterated over with for in, is one way.