オブジェクトのonclick関数でdom要素 'img'を削除できません

Question

私は単純なバブルゲームを作成します（私は配列を作成し、彼はバブルオブジェクトを持っています）、気泡をクリックするとバーストします）、しかし私はonclick関数でdom elemntには適用できません。どうして？どのように私のDOM要素（IMG）に適用することができますか、またはfunc onclickのdom imgを削除するにはどうすればいいですか？

マイオブジェクト "バブル" enter image description here

Google Chromeのインスペクタを書く... enter image description here

全コード：

function resize() { 
 
    Grass.width = document.documentElement.clientWidth; 
 
    Grass.style.left = 0 + 'px'; 
 
    Grass.style.top = document.documentElement.clientHeight - 180 + 'px'; 
 
} 
 
function bubble(id) { 
 
    this.IMG = document.createElement('img');   
 
    this.IMG.src = './bubble.png'; 
 
    this.IMG.id = id; 
 
    this.IMG.onclick = function() { 
 
     document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id)); 
 
    } 
 
    this.createBubble = function() { 
 
     this.bubbleSize = Math.random() * (144 - 30) + 30; 
 
     this.bomDiapozon = Math.random() * (75 - 55) + 55; 
 

 
     this.IMG.style.width = this.bubbleSize + 'px'; 
 
     this.IMG.style.height = this.bubbleSize + 'px'; 
 
     this.xStart = Math.random() * document.documentElement.clientWidth; 
 
     this.yStart = -Math.random() * document.documentElement.clientHeight; 
 
     this.x = this.xStart; 
 
     this.y = this.yStart; 
 
     this.xSpeed = Math.random() * (9 + 9) - 9; 
 
     this.ySpeed = Math.random() * (5 - 1) + 1; 
 
     this.flyWidth = Math.random() * (288 - 144) + 144; 
 
    } 
 
    this.createBubble(); 
 
    document.body.appendChild(this.IMG); 
 
    this.fly = function() { 
 
     if (this.y + this.bubbleSize >= document.documentElement.clientHeight - this.bomDiapozon) { 
 
      this.createBubble(); 
 
     } 
 
     if ((this.x >= this.xStart + this.flyWidth/2) || (this.x <= this.xStart - this.flyWidth/2)) { 
 
      this.xSpeed = -this.xSpeed; 
 
     } 
 
     this.IMG.style.left = this.x + 'px'; 
 
     this.IMG.style.top = this.y + 'px'; 
 
     this.x += this.xSpeed; 
 
     this.y += this.ySpeed; 
 
    } 
 
} 
 
function go() { 
 
     for (var i = 0; i < amountBubbles; i++) { 
 
      bubbles[i].fly(); 
 
     } 
 
} 
 

 
document.body.style.overflow = 'hidden'; 
 
var amountBubbles = 30; 
 
var bubbles = []; 
 
for (var i = 0; i < amountBubbles; i++) { 
 
    bubbles[i] = new bubble(i + 1); 
 
} 
 
var Grass = document.createElement('img'); 
 
Grass.src = './Grass.png'; 
 
document.body.appendChild(Grass); 
 
resize(); 
 
setInterval(go, 40);

img { 
 
    position:absolute; 
 
}

Answer 1

あなたは既にイベントへのアクセス権を持っていますノードを再選択する必要はありません。これを試してみてください：

this.IMG.onclick = function(event) { 
    var parent = event.target.parentElement; 
    parent.removeChild(event.target) 
} 

Answer 2

はオーバーフローを茎へようこそ！

あなたの無名関数では、thisへのコンテキストはありません。以下

スニペットは、その機能にthisを結合し、それはもはや未定義できなくなります。

this.IMG.onclick = (function() { 
    document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id)); 
}).bind(this) 

ちょうどあなたが()でそれをラップし、それに.bind(this)を追加する方法に注目してください。コンテキストをバインドする

もう一つの方法は、矢印の機能を使用することです：

this.IMG.onclick =() => { 
     document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id)); 
    } 

この矢印機能は、あなたの方法にthis、argumentsとsuperをバインドします。

もっと読む矢印の機能上のhere

それは.bind(this)で以下の作業を参照してください： `createBubble`機能で

function resize() { 
 
    Grass.width = document.documentElement.clientWidth; 
 
    Grass.style.left = 0 + 'px'; 
 
    Grass.style.top = document.documentElement.clientHeight - 180 + 'px'; 
 
} 
 
function bubble(id) { 
 
    this.IMG = document.createElement('img');   
 
    this.IMG.src = './bubble.png'; 
 
    this.IMG.id = id; 
 
    this.IMG.onclick = (function() { 
 
     document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id)); 
 
    }).bind(this) 
 
    this.createBubble = function() { 
 
     this.bubbleSize = Math.random() * (144 - 30) + 30; 
 
     this.bomDiapozon = Math.random() * (75 - 55) + 55; 
 

 
     this.IMG.style.width = this.bubbleSize + 'px'; 
 
     this.IMG.style.height = this.bubbleSize + 'px'; 
 
     this.xStart = Math.random() * document.documentElement.clientWidth; 
 
     this.yStart = -Math.random() * document.documentElement.clientHeight; 
 
     this.x = this.xStart; 
 
     this.y = this.yStart; 
 
     this.xSpeed = Math.random() * (9 + 9) - 9; 
 
     this.ySpeed = Math.random() * (5 - 1) + 1; 
 
     this.flyWidth = Math.random() * (288 - 144) + 144; 
 
    } 
 
    this.createBubble(); 
 
    document.body.appendChild(this.IMG); 
 
    this.fly = function() { 
 
     if (this.y + this.bubbleSize >= document.documentElement.clientHeight - this.bomDiapozon) { 
 
      this.createBubble(); 
 
     } 
 
     if ((this.x >= this.xStart + this.flyWidth/2) || (this.x <= this.xStart - this.flyWidth/2)) { 
 
      this.xSpeed = -this.xSpeed; 
 
     } 
 
     this.IMG.style.left = this.x + 'px'; 
 
     this.IMG.style.top = this.y + 'px'; 
 
     this.x += this.xSpeed; 
 
     this.y += this.ySpeed; 
 
    } 
 
} 
 
function go() { 
 
     for (var i = 0; i < amountBubbles; i++) { 
 
      bubbles[i].fly(); 
 
     } 
 
} 
 

 
document.body.style.overflow = 'hidden'; 
 
var amountBubbles = 30; 
 
var bubbles = []; 
 
for (var i = 0; i < amountBubbles; i++) { 
 
    bubbles[i] = new bubble(i + 1); 
 
} 
 
var Grass = document.createElement('img'); 
 
Grass.src = './Grass.png'; 
 
document.body.appendChild(Grass); 
 
resize(); 
 
setInterval(go, 40);

img { 
 
    position:absolute; 
 
}