How can I make it when I click on a picture and drag the range change the RGB color only to that picture I clicked?

Question

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 7-Oct-22 5:04am

Антић Алекса

Updated 11-Oct-22 1:07am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2022-10-11T01:07:00

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[^]