What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

Question

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

When I click on button 1, it starts at image 1 because the counter is set to 0. Clicking on button 2 takes me to image 4 with a counter value of 3, while clicking on button 3 leads to image 7 with a counter value of 6.

The process should also work in reverse - starting from image 7 when button 3 is clicked, moving to image 4 when button 2 is clicked, and then back to image 1 when button 1 is clicked.

I have three buttons that correspond to different positions: 0 for button 1, 1 for button 2, and 2 for button 3. The counter increments by 3 each time a higher-positioned button is clicked.

My goal is to ensure that clicking on button 1 sets the counter to 0, clicking on button 2 sets it to 3, and clicking on button 3 sets it to 6. The counter increases by three for higher-positioned buttons and decreases by three for lower-positioned ones.

I am using variables i for button position and img for the current image number comparison. Here's an example using conditional statements:

let counter = 0;

if(i == 0){
    // setting counter to 0
    img[counter].style.background = "#acc2fa";
}else if(i == 1){
    counter = 3;
    img[counter].style.background = "#084cf6";
}else if(i == 2){
    counter = 6;
    img[counter].style.background = "#031a53";
}

I attempted to simplify the code but encountered issues when the condition is equal to 0. Here's what I tried:

if(i != 0 || (img % 3) == 0){
    counter = counter + 3;
}

If you have any suggestions on how I could address this problem, please let me know. Thank you!

javascript html css image

Answer 1

Answer №1

const images = document.querySelectorAll(".image");


const onClick = (ev) => {

  // Resetting the background for all images 
  // No need to save counter or previously selected image
  [...images].forEach(img => img.style.background = "none")

  const value = ev.target.dataset.index;

  const index = (+value)*3 - 3;

  images[index].style.background = "#acc2fa";

}

.image-wrapper {
  display: flex;
  gap: 10px;
  padding-block: 10px;
}

.image {
  border: 1px solid black;
  text-align: center;
  width: 20px;
  height: 20px;
}

<div class="image-wrapper">
  
  <div class="image">1</div>
  <div class="image">2</div>
  <div class="image">3</div>
  <div class="image">4</div>
  <div class="image">5</div>
  <div class="image">6</div>
  <div class="image">7</div>
  <div class="image">8</div>
  <div class="image">9</div>
  
</div>


<button data-index="1" onclick="onClick(event)">1</button>
<button data-index="2" onclick="onClick(event)">2</button>
<button data-index="3" onclick="onClick(event)">3</button>

The concept here involves having three buttons where each triggers a different function for click event listeners like "onButton1Click", "onButton2Click", and so on. However, this approach is not scalable when needing to add more buttons in the future. Instead, we can utilize HTML5 data-* attributes to pass button values directly to the click handler.

We can bypass using these attributes by passing the button value inline:

<button onclick="onClick(1)">1</button>
<button onclick="onClick(2)">2</button>
<button onclick="onClick(3)">3</button>

This change also alters the onClick handler:

const onClick = (value) => {

  [...images].forEach(img => img.style.background = "none")

  const index = value * 3 - 3;

  images[index].style.background = "#acc2fa";

}

Regarding this line of code:

const index = (+value)*3 - 3;

The unary plus operator (+value) converts the string to a number. For example, +"3" equals 3. This conversion was necessary since the data-* attribute returned a string value that needed to be treated as a number.

The formula value * 3 - 3 follows a specific pattern based on the example provided:

Value = 1 => 1 * 3 - 3 = 0 (zero index represents the first image)

Value = 2 => 2 * 3 - 3 = 3 (index 3 corresponds to the fourth image)

Value = 3 => 3 * 3 - 3 = 6 (index 6 corresponds to the seventh image)

Answer 2

const images = document.querySelectorAll(".image");


const onClick = (ev) => {

  // Resetting the background for all images 
  // No need to save counter or previously selected image
  [...images].forEach(img => img.style.background = "none")

  const value = ev.target.dataset.index;

  const index = (+value)*3 - 3;

  images[index].style.background = "#acc2fa";

}

.image-wrapper {
  display: flex;
  gap: 10px;
  padding-block: 10px;
}

.image {
  border: 1px solid black;
  text-align: center;
  width: 20px;
  height: 20px;
}

<div class="image-wrapper">
  
  <div class="image">1</div>
  <div class="image">2</div>
  <div class="image">3</div>
  <div class="image">4</div>
  <div class="image">5</div>
  <div class="image">6</div>
  <div class="image">7</div>
  <div class="image">8</div>
  <div class="image">9</div>
  
</div>


<button data-index="1" onclick="onClick(event)">1</button>
<button data-index="2" onclick="onClick(event)">2</button>
<button data-index="3" onclick="onClick(event)">3</button>

The concept here involves having three buttons where each triggers a different function for click event listeners like "onButton1Click", "onButton2Click", and so on. However, this approach is not scalable when needing to add more buttons in the future. Instead, we can utilize HTML5 data-* attributes to pass button values directly to the click handler.

We can bypass using these attributes by passing the button value inline:

<button onclick="onClick(1)">1</button>
<button onclick="onClick(2)">2</button>
<button onclick="onClick(3)">3</button>

This change also alters the onClick handler:

const onClick = (value) => {

  [...images].forEach(img => img.style.background = "none")

  const index = value * 3 - 3;

  images[index].style.background = "#acc2fa";

}

Regarding this line of code:

const index = (+value)*3 - 3;

The unary plus operator (+value) converts the string to a number. For example, +"3" equals 3. This conversion was necessary since the data-* attribute returned a string value that needed to be treated as a number.

The formula value * 3 - 3 follows a specific pattern based on the example provided:

Value = 1 => 1 * 3 - 3 = 0 (zero index represents the first image)

Value = 2 => 2 * 3 - 3 = 3 (index 3 corresponds to the fourth image)

Value = 3 => 3 * 3 - 3 = 6 (index 6 corresponds to the seventh image)

Answer 3

Answer №2

The code snippet provided above demonstrates how to reset the background of an image that has been clicked. To achieve this, initialize a counter variable by adding let counter = 0; in the application code, within the scope of the click handler but not inside it. Then, within the click handler, clear the background of the current image based on the value of i:

img[counter].style.background = "revert"; // Clear image background

if(i == 0){
    counter = 0; // Resetting `counter` to zero here
    img[counter].style.background = "#acc2fa";
}else if(i == 1){
    counter = 3;
    img[counter].style.background = "#084cf6";
}else if(i == 2){
    counter = 6;
    img[counter].style.background = "#031a53";
}

Answer 4

The code snippet provided above demonstrates how to reset the background of an image that has been clicked. To achieve this, initialize a counter variable by adding let counter = 0; in the application code, within the scope of the click handler but not inside it. Then, within the click handler, clear the background of the current image based on the value of i:

img[counter].style.background = "revert"; // Clear image background

if(i == 0){
    counter = 0; // Resetting `counter` to zero here
    img[counter].style.background = "#acc2fa";
}else if(i == 1){
    counter = 3;
    img[counter].style.background = "#084cf6";
}else if(i == 2){
    counter = 6;
    img[counter].style.background = "#031a53";
}

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

Answer №1

Answer №2

Similar questions

Transferring API information into a nested array and displaying the outcome

React callbacks involve the interaction between three different components

Struggling to pass two objects as props and have them be equated to one another

Utilizing a function that changes a UNIX timestamp to a month/day/year layout

Visibility of text compromised when placing transparent button inside input field

A guide on transferring documents between collections using Mongoose and MongoDB

Is there a way to transform individual data into a collective group dataset?

Unlocking the Chrome performance tool summary using SeleniumDiscovering the Chrome performance tool

Error: npx is unable to locate the module named 'webpack'

Error: The javascript function is unable to execute because undefined is not recognized as a function

Using Vue.js to increment a value in an array every time a new row is added

JS Nav Dots are not activating the Active Class

"Want to extend the current date (Y-m-d) by a few days? Here

I am curious if there is a feature in intro.js that allows for the highlighting of text or images to

Is there a way to position the search bar on a new line within the navigation bar when the screen size is at its maximum width for mobile

Guidelines for implementing a seamless translation effect with CSS3

Tips on removing the red border from a text box within an HTML form with the help of AngularJS

Creating custom modals for individual elements using PHP

An issue occurred with the session being undefined in Node.js Express4

Tips for customizing the appearance of a Link component while it is the active page in Next.js