如何使用 appendChild 仅更改许多 onclick 中的一张图像？

Question

我目前正在我的大学学习 JavaScript，所以如果我的代码很糟糕，我深表歉意。我是新手。

我在使用 appendChild 仅更改一张图像 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 如果需要

如何使用 appendChild 仅更改许多 onclick 中的一张图像？

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

javascript

image

onclick

appendchild