Question 297734 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why is the first column in all the rows in my 2d array being given the same value?

I am using javascript to populate an array when the page is loaded (every cell gets the value ‘False’) and then I use another javascript function to put the value ‘True’ in a cell when someone clicks on the radio button the table cell. When the Submit button is pressed, the first column of every row has the value ‘True’. I don’t know why this is happening.

Here is the code I am using:

This gets run when the page is loaded:

function Start() {   
      for (let i = 1; i < 11; i++) {
          for (let j = 1; j < 10; j++) {
      arr[i,j]="False" 
          }
      }
    }

This gets run when someone clicks the radio button in the cell of the table on the page:

function myFunction(x,y) {
          arr[x,y]="True";
       }

What is very strange is if I check the value of say arr[2,1] before arr[x,y]="True" in myFunction, it shows "False", but if I check it after arr[x,y]="True", it shows "True"!! It’s not just row 2, it shows "True" for the first column for all the rows!

Can someone please tell me what I am doing wrong?

Tags:

3

Answers


  1. 0

    It seems like you’re trying to use a two-dimensional array in JavaScript to represent a table. Use square bracket notation(arr[x][y]) instead of comma notation(arr[x,y])

    The meaning of arr[x, y]

    let arr = [1, 2, 3, 4, 5];
let x = 2;
let y = 3;
console.log(arr[x, y]);    // Output is 4

    Updated version.

    function Start() {
  for (let i = 1; i < 11; i++) {
    arr[i] = []; // Create an array for each row
    for (let j = 1; j < 10; j++) {
      arr[i][j] = "False";
    }
  }
}

function myFunction(x, y) {
  arr[x][y] = "True";
}
    Login or Signup to reply.
  2. 0

    Arrays are zero-based in JavaScript, therefore the index for a first element in each dimension would be 0 and not 1. And, as mentioned in the comments, you would need to apply a syntax like arr[i][j] in combination with declaring each sub-array first.

    Below is a short snippet showing an alternative way of creating a 2D array with false values:

    const arr=Array(11).fill(0).map(_=>
            Array(10).fill(false));

// Now, change the first value in the third row to TRUE:
arr[2][0]=true;

// show the whole array:
console.log(arr);
    Login or Signup to reply.
  3. 0

    The problem you’re encountering is likely due to a misunderstanding of how JavaScript handles array indices. In JavaScript, multidimensional arrays aren’t supported directly, and the syntax arr[i, j] doesn’t create a two-dimensional array.

    When you do arr[i, j] = "False", JavaScript is actually computing the expression i, j using the comma operator, which evaluates both of its operands (from left to right) and returns the value of the second operand. So, arr[i, j] is essentially the same as arr[j], because that’s the last value in the comma operator.

    As a result, arr[1,1], arr[2,1], arr[3,1], and so on all reference arr[1], and that’s why it seems like the first column is set to “True” for all rows.

    Instead, you should be creating an array of arrays to simulate a two-dimensional structure. Here’s how you can modify your code:

    // Define arr as a global variable, or within a scope accessible to your functions
let arr = [];

function Start() {
  for (let i = 0; i < 10; i++) {
    arr[i] = []; // Initialize each array within the array
    for (let j = 0; j < 10; j++) {
      arr[i][j] = "False"; // Note the use of [i][j] instead of [i,j]
    }
  }
}

function myFunction(x, y) {
  arr[x][y] = "True";
}

    Note a few things here:

    Array indices start at 0. So if you want ten rows and columns, your loop should start from 0 and go to less than 10 (which is indices 0 through 9).

    When setting up the array, use arr[i] = [] to create a new array for each row and then fill it with “False” values.

    In the myFunction, ensure you access the element with arr[x][y], which gets the yth value in the xth subarray, reflecting a two-dimensional structure.

    Make sure you adjust your calls to myFunction accordingly; for example, if you have an event listener or an inline event like onclick, update the indices to match this zero-based array indexing system. If the radio buttons are correctly mapped to this revised code, it should solve the issue you’re experiencing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search