getElementById to modify 4 images with clicks link

Question

I am trying to use the function to change between 4 images through clicks on certain links. However while an image appears, the other 3 also appear as a field to be filled in. I would like to show only one. I would also like to put a text in the price field that will vary according to the image.

function mudaImagem(i) {

  if (i == 1) {
    document.getElementById("imagem1").src = "Dulce_GustoP.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP_not.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P_not.jpg";
    document.getElementById("imagem4").src = "SenseoP_not.jpg";
  } else if (i == 2) {
    document.getElementById("imagem1").src = "Dulce_GustoP_not.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P_not.jpg";
    document.getElementById("imagem4").src = "SenseoP_not.jpg";
  } else if (i == 3) {
    document.getElementById("imagem1").src = "Dulce_GustoP_not.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP_not.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P.jpg";
    document.getElementById("imagem4").src = "SenseoP_not.jpg";
  } else if (i == 4) {
    document.getElementById("imagem1").src = "Dulce_GustoP_not.jpg";
    document.getElementById("imagem2").src = "Nespresso_InissiaP_not.jpg";
    document.getElementById("imagem3").src = "Nespresso_C50P_not.jpg";
    document.getElementById("imagem4").src = "SenseoP.jpg";
  }
}

<tr>
  <th class="colTH">Dolce Gusto</th>
  <td><a id="colTD" onclick="mudaImagem(1)" onclick="mudaTexto(1)">Piccolo</a>
  </td>
  <td rowspan="4">
    <img id="imagem1" onclick="mudaImagem(1);" />
    <img id="imagem2" onclick="mudaImagem(2);" />
    <img id="imagem3" onclick="mudaImagem(3);" />
    <img id="imagem4" onclick="mudaImagem(4);" />
  </td>
  <td rowspan="4">
    <img id="texto1" onclick="mudatexto(1);" />
    <img id="texto2" onclick="mudatexto(2);" />
    <img id="texto3" onclick="mudatexto(3);" />
    <img id="texto4" onclick="mudatexto(4);" />
  </td>
</tr>
<tr>
  <th rowspan="2" class="colTH">Nespresso</th>
  <td><a id="colTD" onclick="mudaImagem(2)">Inissia C40</a>
  </td>
</tr>
<tr>
  <td><a id="colTD" onclick="mudaImagem(3)">U C50</a>
  </td>
</tr>
<tr>
  <th class="colTH">Senseo</th>
  <td><a id="colTD" onclick="mudaImagem(4)">HD7811/96</a>
  </td>
</tr>

Answer 1

friend, I had to do something similar some time ago, it follows the code I wrote.

var container = document.getElementById("container");
var imagens = container.querySelectorAll("[data-sel]");
var preco = document.getElementById("preco");

[].forEach.call(imagens, function (imagem, indice) {
	imagem.addEventListener("click", function (event) {
        container.className = event.target.dataset.sel;
        preco.value = event.target.dataset.preco;
    });
})

#container {
    position: relative; 
    width: 330px;
    height: 440px;
} 

#imagem1, #imagem2, #imagem3, #imagem4 {
    position: absolute;    
    margin: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px black;
    
    transition: width 1s, height 1s, top 1s, left 1s;
}

#container img {
    width: 100%;
    height: 100%;
}

.sel1 #imagem1 {    
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px;
    z-index: 4;
}

.sel1 #imagem2 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel1 #imagem3 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel1 #imagem4 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel2 #imagem1 {    
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel2 #imagem2 {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px;
    z-index: 4;
}    

.sel2 #imagem3 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel2 #imagem4 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel3 #imagem1 {    
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel3 #imagem2 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel3 #imagem3 {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px;
    z-index: 4;
}   

.sel3 #imagem4 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel4 #imagem1 {    
    width: 100px;
    height: 100px;
    top: 330px;
    left: 0px;
}

.sel4 #imagem2 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 110px;
}

.sel4 #imagem3 {
    width: 100px;
    height: 100px;
    top: 330px;
    left: 220px;
}

.sel4 #imagem4 {
    width: 320px;
    height: 320px;
    top: 0px;
    left: 0px; 
    z-index: 4;
}

<div id="container" class="sel1">
    <div id="imagem1" data-sel="sel1" data-preco="7.35">
        1
    </div>    
    <div id="imagem2" data-sel="sel2" data-preco="12.15">
        2
    </div>
    <div id="imagem3" data-sel="sel3" data-preco="5.65">
        3
    </div>
    <div id="imagem4" data-sel="sel4" data-preco="8.00">
        4
    </div>
</div>
<input id="preco" type="text" readonly value="7.35" />

you just need to change the div#imagem for his images.

Answer 2

Solved the image problem. It was only necessary to remove the image path that was being inserted according to the tutorial I used as a basis for using the js method.

function mudaImagem(i) {

  if (i == 1) {
    document.getElementById("imagem1").src = "Dulce_GustoP.jpg";
    document.getElementById("imagem2").src = "";
    document.getElementById("imagem3").src = "";
    document.getElementById("imagem4").src = "";
  } else if (i == 2) {
    document.getElementById("imagem1").src = "";
    document.getElementById("imagem2").src = "Nespresso_InissiaP.jpg";
    document.getElementById("imagem3").src = "";
    document.getElementById("imagem4").src = "";
  } else if (i == 3) {
    document.getElementById("imagem1").src = "";
    document.getElementById("imagem2").src = "";
    document.getElementById("imagem3").src = "Nespresso_C50P.jpg";
    document.getElementById("imagem4").src = "";
  } else if (i == 4) {
    document.getElementById("imagem1").src = "";
    document.getElementById("imagem2").src = "";
    document.getElementById("imagem3").src = "";
    document.getElementById("imagem4").src = "SenseoP.jpg";
  }
}