Click here to Skip to main content
15,917,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
When I click on a picture and drag all three range colors, the border changes, but it changes on all pictures, I only need the one I clicked on.

What I have tried:

const arrayIMG = document.getElementsByTagName('img');
let slider1 = document.getElementById("range1");
let slider2 = document.getElementById("range2");
let slider3 = document.getElementById("range3");

let R = 0;
let G = 0;
let B = 0;

for (let i = 1; i < arrayIMG.length; i++) {
    
    arrayIMG[i].addEventListener('click', function(){
        
        arrayIMG[0].src = arrayIMG[i].src;
        for (let j = 0; j < arrayIMG.length; j++) {
            arrayIMG[j].style.border = 'none';
             
        }
        arrayIMG[i].style.border = '5px solid purple';
      

       slider1.addEventListener("change", () => {
        R = slider1.value; 
        arrayIMG[i].style.border = "5px solid rgb(" + R.toString() + ", " + G.toString() + ", " + B.toString();
        
    });
    
    slider2.addEventListener("change", () => {
        G = slider2.value;
        
        arrayIMG[i].style.border = "5px solid rgb(" + R.toString() + ", " + G.toString() + ", " + B.toString();
    
    });
    
    slider3.addEventListener("change", () => {
        B = slider3.value;
        
        arrayIMG[i].style.border = "5px solid rgb(" + R.toString() + ", " + G.toString() + ", " + B.toString();
        
    });
    
    }
    
    
    
    
    
    );

    
    
}
Posted
Updated 11-Oct-22 1:07am

1 solution

The addEventListener method is cumulative; every time you call it, the specified listener is added to the event. Since you never remove a listener[^], the list of listeners keeps building up.

If you click image 1, you add listeners to the sliders to update the border of image 1. If you then click image 2, you add listeners to the sliders to update image 2, in addition to the existing listeners which update image 1.

It would be better to track the selected image outside of its click event listener, and to use a single listener for the sliders to update the border of the selected image.

You can also use event delegation[^] to tidy up your code.

For example:
JavaScript
const arrayIMG = [...document.getElementsByTagName('img')];
let selectedImg = null;

const slider1 = document.getElementById("slider1");
const slider2 = document.getElementById("slider2");
const slider3 = document.getElementById("slider3");

let R = 0;
let G = 0;
let B = 0;

document.addEventListener("click", e => {
    let target = e.target;
    if (target.tagName !== "IMG") { target = target.closest("img"); }
    if (!target || target === arrayIMG[0]) { return; }
    
    selectedImg = target;
    arrayIMG[0].src = selectedImg.src;
    
    arrayIMG.forEach(i => i.style.border = "none");
    selectedImg.style.border = "5px solid purple";
});

document.addEventListener("change", e => {
    if (!selectedImg) {
        // No image is selected.
        return;
    }
    
    if (e.target === slider1) {
        R = slider1.value;
    } else if (e.target === slider2) {
        G = slider2.value;
    } else if (e.target === slider3) {
        B = slider3.value;
    } else {
        // Target was not one of the sliders.
        return;
    }
    
    selectedImg.style.border = `5px solid rgb(${R},${G},${B})`;
});
Demo[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900