How to add two values into the array using JavaScript

Question

well,I want to add the values from the text box into the array, i tried but it only works to add one value,why?If it is possible then how could i achieved it? below the code that i tried,

<script type="text/javascript">
  var x = 0;
  var y = 0;
  var array = Array();

  function addintoarray() {
    array[x] = document.getElementById("cuna").value; //create the array for to add custumer name
    array[y] = document.getElementById("cuad").value; //create the array to add custemer address
    alert("Custmername: " + array[x] + "Added" + "Custmeraddress: " + array[y] + "Added"); //display msg
    x++; //count increament to add another one
    y++;
    document.getElementById("cuna").value = "";
    document.getElementById("cuad").value = "";
  }

</script>

table

<form method="post">
  <table border="1">
    <tr>
      <td>CustmerName</td>
      <td><input type="text" id="cuna" /></td>
    </tr>
    <tr>
      <td>CustmerAddress</td>
      <td><input type="text" id="cuda" /></td>
    </tr>
    <tr>
      <td><input type="submit" value="Add" onclick="addintoarray();" />
      </td>
      <td><input type="Submit" value="Display" onclick="displayintoarray" /></td>
    </tr>
  </table>
</form>

Answer 1

You are initializing both x and y to 0 so every time you do array[x] = or array[x] = you are targeting an element at index 0 . If you want to add items you can use the JavaScript's array.push() method.

Using JavaScript Objects to store values Since I noticed you want to keep adding onto the array you should consider using objects to group your data in your array. ` var myArray = Array();

  function addintoarray() {
    let name = document.getElementById("cuna").value; 
    let address = document.getElementById("cuad").value;

    myArray.push({'customerName':name,'customerAddress':address})

    alert("Customername: " + name + "Added. " + "Customeraddress: " + address + "Added");

}`

Answer 2

What you should do is change the values of the x and y.

var x = 0;
var y = 1;
var array = Array();

Then this will work.

array[x] = document.getElementById("cuna").value; 
array[y] = document.getElementById("cuad").value; 

But in my opinion you do not need to do like this. You can use array push method.

 array.push(document.getElementById("cuna").value)
 array.push(document.getElementById("cuad").value)

Answer 3

I think you want the result to be like that :

[[cuna1, cuad1][cuna2, cuad2]]

In this case you should do the following :

let arrayToPush = [document.getElementById("cuna").value,document.getElementById("cuad").value]

(btw be careful you have a typo in your HTML : "cuda" instead of "cuad")

and then do

array.push(arrayToPush)

The solution with x= 0 and y=1 will not work because on the second round x will be 1 and y will be 2 and therefor array[x] will overwrite previous value. However they are correct saying you should avoid to use index and rather just push to array.

Answer 4

You use x,y as index with the same value so replacing each other. Your assign array[x] and then array[y] which means at initial case

array[0]=document.getElementById("cuna").value;
array[0]=document.getElementById("cuad").value;

you may use two differnt initial values like x=0, y=1 and still increment values x += 2; y += 2;

instead you may use array prototype to push values

array.push(document.getElementById("cuna").value);
array.push(document.getElementById("cuad").value);