How do I change only one image out of many onclick with appendChild?

Question

I'm currently learning JavaScript at my university, so I apologize if my code is terrible. I'm new to it.

I'm having an issue only changing one image onclick using appendChild. What I want to happen is that if the person clicks on the image whose rng is <= 0.89, then only that image is changed to a different image. Every thing I've tried has changed all of the images whose rng was <=0.89.

Example: I click the first image (img1) which has rolled a number greater than 0.9. If (img2) has rolled the same (greater than 0.9), then it also changes. I'd only want img1 to change. Here is only some of my code as the whole thing is about 150 lines and I think this bit gets my point across somewhat well:

function myFunction() {
var rng=Math.random();
var rng2=Math.random();
if (rng <= 0.89){
  var img1=document.createElement('img');
  img1.src='card2.gif';
  img1.id="bad1"; 
  img1.onclick = goodbye;
  document.getElementById('card').appendChild(img1);
}
if (rng2 <= 0.89){
  var img2=document.createElement('img');
  img2.src='card2.gif';
  img2.onclick= goodbye;
  img2.id="bad2";
  document.getElementById('card2').appendChild(img2);
  }
if (rng >= 0.9) {
  var img1=document.createElement('img');
  img1.src='card3.gif';
  img1.id="good1"; 
  img1.onclick = hello;
  document.getElementById('card').appendChild(img1);
}
if (rng2 >= 0.9){
  var img2=document.createElement('img');
  img2.src='card3.gif';
  img2.onclick= hello;
  img2.id="good2";
  document.getElementById('card2').appendChild(img2);
  }
}

Like I said, every thing I've tried to only change the image that was clicked has changed all images whose rng is <=0.89. The answer's probably really obvious, but I'm new to this, like I said.

Answer 1

Based on the comments, the only change that your code needs is to make .onclick set to a function instead of a string. This way we also pass this the element reference to your functions goodbye and hello. You can also use this to read the element properties if you wanted to. If this is not what your looking for let us know.

img1.onclick = function(){goodbye(this)};

Script

function goodbye(e) {
    e.src = 'https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png'
}

function hello(e) {
    e.src = 'https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg'
}

function myFunction() {
    var rng = Math.random();
    var rng2 = Math.random();
    if (rng <= 0.89) {
        var img1 = document.createElement('img');
        img1.src = 'card2.gif';
        img1.id = "bad1";
        img1.onclick = function () {
            goodbye(this)
        };
        document.getElementById('card').appendChild(img1);
    }
    if (rng2 <= 0.89) {
        var img2 = document.createElement('img');
        img2.src = 'card2.gif';
        img2.onclick = function () {
            goodbye(this)
        };
        img2.id = "bad2";
        document.getElementById('card2').appendChild(img2);
    }
    if (rng >= 0.9) {
        var img1 = document.createElement('img');
        img1.src = 'card3.gif';
        img1.id = "good1";
        img1.onclick = function () {
            hello(this)
        };
        document.getElementById('card').appendChild(img1);
    }
    if (rng2 >= 0.9) {
        var img2 = document.createElement('img');
        img2.src = 'card3.gif';
        img2.onclick = function () {
            hello(this)
        };
        img2.id = "good2";
        document.getElementById('card2').appendChild(img2);
    }
}

jsfiddle if required