Question

我目前正在大学学习JavaScript，所以如果我的代码太糟糕，我会道歉。我是新手。

我遇到的问题是只使用appendChild更改一个图像onclick。我想要发生的是，如果用户点击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设置为函数而不是字符串。这样，我们也会将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中的一个图像？

1 个答案: