Как изменить только одно изображение из многих onclick с appendChild?

Question

В настоящее время я изучаю JavaScript в своем университете, поэтому извиняюсь, если мой код ужасен. Я новичок в этом.

У меня возникла проблема с изменением одного изображения onclick с помощью appendChild. Я хочу, чтобы это произошло, если человек нажимает на изображение, rng которого равно < = 0,89, тогда только это изображение изменяется на другое изображение. Все, что я пробовал, изменило все изображения, чей rng был < = 0.89.

Пример: Я нажимаю первое изображение (img1), которое свернуло число больше 0,9. Если (img2) развернуто то же самое (больше 0,9), то оно также меняется. Я бы хотел, чтобы img1 изменился. Вот только некоторые из моего кода, все это составляет около 150 строк, и я думаю, что этот бит получает свою точку через несколько хорошо:

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); 
    } 
} 

Как я уже говорил, каждая вещь, я пытался изменить только изображение, был изменен все изображения с rng < = 0.89. Ответ, вероятно, очень очевиден, но я новичок в этом, как я уже сказал.

Answer 1

Основываясь на комментариях, единственное изменение, которое требуется вашему коду, состоит в том, чтобы сделать .onclick назначенным функции вместо строки. Таким образом, мы также передаем элемент ссылки на ваши функции goodbye и hello. Вы также можете использовать this, чтобы прочитать свойства элемента, если хотите. Если это не то, что вы ищете, дайте нам знать.

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 при необходимости