Question 176534 in Html Question posted in
Some basic documentation can be found here.

Can I display 3 images by 3, starting at 0, by clicking buttons in JS?

I have a total of 9 images when I click on button 1 it starts at image 1 because the counter is 0, when I click on button 2 it moves to image 4 and the counter is equal to or is 3 and if I click on button 3 moves to image 7 and counter is equal to or equal to 6.

and should work backwards, if I click on button 3 it starts on image 7 and if I click on button 2 it should move to image 4 and if I click on button 1 start on image 1

I have three buttons when I click on the first one I am in position 0 and the counter is equal to 0, when I click on the second button I am in position 1 and the counter is equal to 3, when I click on button 3 I am in position 2 and the counter is equal to 6.

My intention is that whenever I click on button 1, the counter is equal to 0 and if I click on button 2, the counter is equal to 3 and if I click on button 3, the counter is equal to 6, that is, it will increase by three values when the position of the button is higher and will decrease by three when the position of the button that has been clicked is lower.

The variable i is the position of the button that is clicked. The variable img is the number of the current image to be compared

Let’s say it would look like this using if but what I want is to make it simplified

let counter = 0;

if(i == 0){
    // here the counter is equal to 0, counter = 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 tried to simplify, but it does not work because when the condition is equal to 0 it is not fulfilled.

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

Any suggestions on how I could solve my problem thanks

Tags:

2

Answers


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


const onClick = (ev) => {

  [...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>
    Login or Signup to reply.
  2. 0

    The posted code doen’t reset the background of an image that has been clicked already. Try initializing the counter by putting let counter = 0; in application code, in scope of the click handler but not within it. Then, in the click handler, clear the current img[counter] before setting it according to i:

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

if(i == 0){
    counter = 0; // move 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";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search