未捕獲TypeError：無法設置null的屬性'onclick'。試過window.onload

Question

所以，我比較新Javascrip。雖然我想要做的是在畫布上給我一個移動圖像作爲id，以便我最終可以使用onclick將圖像用作可點擊的圖像，以便我可以將用戶重定向到另一個頁面，這會發生在圖像被點擊。這是我的代碼到目前爲止。我需要幫助。如果你需要更多的澄清，我會嘗試進一步解釋。

 var ctx; 
     var imgBg; 
     var imgDrops; 
     var x = 0; 
     var y = 0; 
     var noOfDrops = 50; 
     var fallingDrops = []; 
      function drawBackground(){ 
    ctx.drawImage(imgBg, 0, 0); //Background 
      } 
      function draw() { 
    drawBackground(); 

    for (var i=0; i< noOfDrops; i++) 
    { 
    ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop 

    fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed 
    if (fallingDrops[i].y > 1000) { //Repeat the raindrop when it falls out of view 
    fallingDrops[i].y = -25 //Account for the image size 
    fallingDrops[i].x = Math.random() * 10000; //Make it appear randomly along the width 
       } 

       } 
      } 
      function setup() { 
    var canvas = document.getElementById('canvasRegn'); 

    if (canvas.getContext) { 
      ctx = canvas.getContext('2d'); 

       imgBg = new Image(); 
     imgBg.src = "http://images.susu.org/unionfilms/films/backgrounds/hd/space-jam.jpg"; 
    setInterval(draw, 36); 
    for (var i = 0; i < noOfDrops; i++) { 
     // Charles Barkley 
     var fallingDr = new Object(); 
     fallingDr["image"] = new Image(); 
     fallingDr.image.src = 'http://xenboards.ignimgs.com/external_data/attachments/8/8795-f09b907a01726a25ca2fbd2f588e3f0e.jpg'; 
     fallingDr["x"] = Math.random() * 10000; 
     fallingDr["y"] = Math.random() * 5; 
     fallingDr["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr); 
     // Bugs bunny 
     var fallingDr2 = new Object(); 
     fallingDr2["image"] = new Image(); 
     fallingDr2.image.src = 'http://i.imgur.com/zN2CSAf.png' 
     fallingDr2["x"] = Math.random() * 10000; 
     fallingDr2["y"] = Math.random() * 5; 
     fallingDr2["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr2); 
     // Michael Jordan 
     var fallingDr3 = new Object(); 
     fallingDr3["image"] = new Image(); 
     fallingDr3.image.src = 'http://i.imgur.com/XxvJiGg.png' 
     fallingDr3["x"] = Math.random() * 10000; 
     fallingDr3["y"] = Math.random() * 5; 
     fallingDr3["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr3); 
     // Daffy duck 
     var fallingDr4 = new Object(); 
     fallingDr4["image"] = new Image(); 
     fallingDr4.image.src = 'http://i.imgur.com/QZogw2L.png' 
     fallingDr4["x"] = Math.random() * 10000; 
     fallingDr4["y"] = Math.random() * 5; 
     fallingDr4["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr4); 
     fallingDr4.image.id = "Daffy"; 
     } 
    } 
      } 
     setup(); 
     window.onload = function(){ 
      document.getElementById("Daffy").onclick=function(){ 
     alert("Hello World"); 
     } 
     } 

Answer 1

嘗試：

fallingDr4.image.onclick=function(){ 
     alert(this.id); 
     } 

應提醒 「達菲」。

Answer 2

您的問題是，您正在嘗試捕獲不在文檔中的元素上的單擊事件，因此用戶無法點擊。

當您撥打var img = new Image()時，會創建一個新的<img>元素，並且其所有屬性都可以在JavaScript中修改。但此元素僅適用於您的腳本，並且在撥打document.anyElement.appendChild(img)之前不會顯示在頁面中。所以最好把它看作一個imageObject而不是一個元素（即使它實際上也是這樣）。

您的文檔中包含什麼內容，並且您的用戶可以訪問的內容是<canvas>元素。因此，如果您想知道用戶是否點擊過，則必須將eventListener附加到此canvasElement。

但是canvasElement並不知道它代表什麼。當您致電context.drawImage()時，您只需將imageSource中的像素應用到畫布的像素，並且對原始圖像對象的所有引用都將丟失。
要解決此問題，您必須將繪製圖像的位置存儲到畫布中，然後檢查您捕獲的單擊事件是否位於這些位置內。 點擊事件'clientX和clientY作爲處理程序的參數傳遞的Event的屬性將爲您提供事件發生時遊標的位置。但是這些職位相對於窗口的左上角。因此，您還需要使這些相對於畫布的左上角，這可以通過調用canvasElement的getBoundingClientRect()方法來完成。

下面是一個簡單的例子：

// this function will be called at image's load 
 
var init = function() { 
 
    // a reference to our "in-screen" canvasElement 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    // "kitty" will be the js object that will help us know if we clicked on our image 
 
    // "this" refers to the imageObject 
 
    var kitty = { 
 
     width: this.width, 
 
     height: this.height, 
 
     // random positions 
 
     left: Math.random() * (canvas.width - this.width), 
 
     top: Math.random() * (canvas.height - this.height), 
 
    }; 
 
    // draw our image at the random positions we created 
 
    ctx.drawImage(this, kitty.left, kitty.top, kitty.width, kitty.height); 
 
    // here we're listening to mousemove event, 
 
    // but click event shares the same clientX & clientY properties 
 
    var moveHandler = function(evt) { 
 
     // in the "evt" object passed, we can get the x and y positions relative to the window 
 
     // so we make these relatives to the canvas ones 
 
     var canvasRect = canvas.getBoundingClientRect(); 
 
     var x = evt.clientX - canvasRect.left; 
 
     var y = evt.clientY - canvasRect.top; 
 

 
     // now we've got our relative positions, we can check if we were inside the image 
 
     if (x >= kitty.left && x <= (kitty.left + kitty.width) && y >= kitty.top && y <= (kitty.top + kitty.height)) { 
 
      // we are over the image, do something 
 
      canvas.style.cursor = 'pointer'; 
 
      document.body.style.backgroundColor = 'lightblue'; 
 
     } else { 
 
      canvas.style.cursor = 'default'; 
 
      document.body.style.backgroundColor = 'transparent'; 
 
     } 
 
     }; 
 
     // attach this event handler to the canvasElement 
 
     canvas.addEventListener('mousemove', moveHandler); 
 
    }; 
 

 
// this will create an imageObject, which will stay "off-screen" (never appendded to the document) 
 
var img = new Image(); 
 
// wait that the image has loaded before trying to make any magic 
 
img.onload = init; 
 

 
img.src = "http://lorempixel.com/200/70/cats";

body { 
 
    width: 100vw; 
 
    text-align: center; 
 
} 
 
canvas { 
 
    margin: 0 auto; 
 
    position: relative; 
 
}

<canvas id="canvas" width="500" height="500"></canvas>

（您可能需要滾動到實際看到的圖像，或去全屏）