appendChildを使用して多くのonclickから1つのイメージのみを変更するにはどうすればよいですか？

Question

私は現在私の大学でJavaScriptを学んでいるので、コードがひどい場合はお詫びします。私はそれが初めてです。

appendChildを使用して1つの画像onclickを変更するだけの問題があります。私は、rngが< = 0.89の画像をクリックすると、その画像だけが別の画像に変更されてしまうのです。私が試したすべてのものが、rngが< = 0.89だった画像をすべて変更しました。

例：0.9より大きい数字を丸めた最初のイメージ（img1）をクリックします。 （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を文字列ではなく関数に設定することです。このようにして、thisファンクションgoodbyeとhelloに要素参照を渡します。必要に応じて、thisを使用して要素プロパティを読み取ることもできます。これがあなたの探しているものでない場合は、私たちにお知らせください。

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

スクリプト

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