Change Active Color Image With JavaScript

Question

Please take a look at this JSFiddle .

I've tried to write some JS to make it so that when one of the colors in the bottom row is clicked on, the image in the top row changes. I included the images that it should change to over in the JS (they're all saved on imgur).

Unfortunately, nothing is happening. What is wrong?

HTML

<div class = "row">
  <div class="active">
  <img id="active-color" src="https://i.imgur.com/wSRf1kZ.png"/>
  </div>
</div>

<div class="row">
  <div class="other-color">
  <img id ="black" src="https://i.imgur.com/NzYkFkO.png" onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id ="green" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id="pink" src="https://i.imgur.com/8oTZjc9.png"  onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id="blue" src="https://i.imgur.com/oFSqOUp.png" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id="brown" src="https://i.imgur.com/xbj7l5p.png" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
  </div>
</div>

CSS

.row {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
}

.other-color {
  width: 50px;
  height: 50px;
  display: block;
}

JS

//green on white
//https://i.imgur.com/04hDBLJ.png

//pink on white
//https://i.imgur.com/FG9voBX.png

//blue on white
//https://i.imgur.com/SmNcXqY.png

//brown on white
//https://i.imgur.com/erFfzyQ.png

function changeImage() {
//if black, stay black
if (document.getElementById("active-color").src == "https://i.imgur.com/NzYkFkO.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/wSRf1kZ.png";
}
//if green, turn green
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/04hDBLJ.png";
}
//if pink, turn pink
if (document.getElementById("active-color").src == "https://i.imgur.com/8oTZjc9.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/FG9voBX.png";
}
//if blue, turn blue
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
}
//if brown, turn brown
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/erFfzyQ.png";
}
}

Also any jQuery solutions would be fine.

Answer 1

Try this

html:

<div class="other-color">
    <img id="black" src="https://i.imgur.com/NzYkFkO.png" onclick="changeImage(this.src)"/>
</div>

js:

function changeImage(src) {
        //if black, stay black
        if (src == "https://i.imgur.com/NzYkFkO.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/wSRf1kZ.png";
    }
        //if green, turn green
        if (src == "https://i.imgur.com/D2uiTnX.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/04hDBLJ.png";
    }   //if pink, turn pink
        if (src == "https://i.imgur.com/8oTZjc9.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/FG9voBX.png";
    }   //if blue, turn blue
        if (src == "https://i.imgur.com/oFSqOUp.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
    }   //if brown, turn brown
        if (src == "https://i.imgur.com/xbj7l5p.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/erFfzyQ.png";
    }
} 

Answer 2

You need to transfer the data of what was clicked to the function in order to do your checks. As it is now, there is no way to check what element was clicked in your Javascript and fetch its src. Hope this helps.

html:

<div class="other-color">
    <img id="blue" src="https://i.imgur.com/oFSqOUp.png" onclick="changeImage(this.src)"/>
</div>

js:

function changeImage(src) {
    if (src == "https://i.imgur.com/oFSqOUp.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
    }
}