如何用appendChild從多個onclick中只更改一個圖像？

我目前在我的大學學習JavaScript，所以如果我的代碼很糟糕，我很抱歉。我是新手。如何用appendChild從多個onclick中只更改一個圖像？

我有一個問題，只改變一個圖像onclick使用appendChild。我想要發生的事情是，如果用戶點擊了rng爲< = 0.89的圖像，則只有該圖像被更改爲不同的圖像。我試過的每一件事都改變了所有的圖像，其中r是< = 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。答案可能很明顯，但我是新來的，就像我說的。

來源

2016-11-14 FuzzyBlueLights

所以，你已經有一個元素調用'myFunction的（）'當他們點擊。然後在裏面計算一個隨機數，如果符合條件附加一個新的'img'元素。你的問題是，它總是隻會<= 0.89而不是其他的？ – Searching

隨機數生成器工作正常，它會根據它所滾動的數字生成我希望它生成的圖像。 myFunction（）被調用onLoad。我的問題是有一個onclick事件只改變被點擊的圖片。我無法弄清楚如何做到這一點，因爲我嘗試過的所有內容都已經改變了所有捲起相同號碼組的圖像。例如：我點擊第一個圖片（img1），該圖片的數字大於0.9。如果（img2）滾動相同（大於0.9），那麼它也會改變。我只想要img1改變。 – FuzzyBlueLights

你可以檢查這個jsfiddle並告訴我，這是你在做什麼https://jsfiddle.net/c4f1bkua/1/？ – Searching

根據註釋，您的代碼所需的唯一更改是將.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如果需要

來源

2016-11-14 07:41:30 Searching

如何用appendChild從多個onclick中只更改一個圖像？

回答

相關問題