Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Question

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task.

Specifically, what I aim to achieve is that when a div in the grid is clicked, it should change color and modify a number in the array from 0 to 1 (or vice versa). Although there are other numbers involved, this is the basic functionality.

I believe using an onClick listener to change the class of the div would be the optimal approach to handle the color change, but how can I establish a connection between the array and the grid?

Thank you in advance for any assistance you can provide.

javascript jquery html css

Answer 1

Answer №1

To interact with elements in the DOM and an array, you can use indexing.

var colorsArray =[
  {color:'blue', num:0},
  {color:'green',  num:0}
];

$(function(){
  var $boxes =  $('.box-class').click(function(){
     var boxIndex = $boxes.index(this);
     $(this).css('backgroundColor', colorsArray[boxIndex].color);
     colorsArray[boxIndex].num ++;
     console.log(colorsArray);
  });
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-class">Click me - item #1</div>
<div class="box-class">Click me - item #2</div>

Answer 2

To interact with elements in the DOM and an array, you can use indexing.

var colorsArray =[
  {color:'blue', num:0},
  {color:'green',  num:0}
];

$(function(){
  var $boxes =  $('.box-class').click(function(){
     var boxIndex = $boxes.index(this);
     $(this).css('backgroundColor', colorsArray[boxIndex].color);
     colorsArray[boxIndex].num ++;
     console.log(colorsArray);
  });
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-class">Click me - item #1</div>
<div class="box-class">Click me - item #2</div>

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Answer №1

Similar questions

Flexible array for varying results

issue with accessing instant state modification via useEffect

The Angular Material Datepicker lacks any selected date

Take away the follow option on the embedded tweet

Replacing text within nested elements

Iterating through a JSON object to verify the presence of a specific value

The Challenge of a Chess Board that Adjusts to Different

The spacing within the table's <tr> elements does not get altered

Ways to include extra information in a request when uploading images using Django's CKEditor?

IE Troubles: Timer Function Fails in Asp.Net MVC

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

Manipulate the DOM to remove a checkbox using JavaScript

Is there a way to automatically hide divs with the style "visibility:hidden" if they are not visible within the viewport?

How to retrieve the selected value from multiple JQuery UI Autocomplete boxes?

Display a page with sections that have opacity applied, identified by the hashtag #section, and utilize JavaScript to automatically scroll to the top of

Unfortunate escapement of characters discovered in variable that returns JSON image source

Creating a webpage with HTML through C++

What is the process for setting environment variables in a Svelte project?

Error: The function you are trying to reference is undefined

X-editable does not verify if the checklist values are checked