Issues with document.appendChild() in JS

I'm developing a web page of the game Mastermind, using images instead of colors. I generate the password using Math.floor(Math.random() * 6) + 1; to generate numbers from 1 to 6, and using that function to convert a number to an image:

var sam = document.createElement("img");  sam.src = "./samwell_tarly.jpeg";  var arya = document.createElement("img");  arya.src = "./arya_stark.jpeg";  var dany = document.createElement("img");  dany.src = "./dany.jpeg";  var jon = document.createElement("img");  jon.src = "./jon.jpeg";  var ned = document.createElement("img");  ned.src = "./ned_stark.jpeg";  var tyrion = document.createElement("img");  tyrion.src = "./tyrion.jpeg";  var ocu1 =  document.getElementById("oc1");  var ocu2 =  document.getElementById("oc2");  var ocu3 =  document.getElementById("oc3");  var ocu4 =  document.getElementById("oc4");    function intToGot(x) {      if(x==1){return arya;}      if(x==2){return sam;}      if(x==3){return ned;}      if(x==4){return dany;}      if(x==5){return jon;}      if(x==6){return tyrion;}  }  

and then:

const oc1=Math.floor(Math.random() * 6) + 1;  ocu1.appendChild(intToGot(oc1));  const oc2=Math.floor(Math.random() * 6) + 1;  ocu2.appendChild(intToGot(oc2));  const oc3=Math.floor(Math.random() * 6) + 1;  ocu3.appendChild(intToGot(oc3));  const oc4=Math.floor(Math.random() * 6) + 1;   ocu4.appendChild(intToGot(oc4));  

Those are my divs:

            <div class="maiores" id="oc1"></div>              <div class="maiores" id="oc2"></div>              <div class="maiores" id="oc3"></div>              <div class="maiores" id="oc4"></div>  

The problem i am facing is that: When the numbers generated are all different, all of the 4 random images appear correctly, with no problems at all. But, when there is repetition, for example, if the password should be [sam,sam,dany,jon], only the last one of the repeated images appear, and the others just don't appear. In that case, the first 'sam' wouldn't appear. I can't understand how am I using wrong the appendChild function, and I need help to solve that problem.

https://stackoverflow.com/questions/66523958/issues-with-document-appendchild-in-js March 08, 2021 at 11:27AM