javascript - 未捕获类型错误 : Cannot set property 'onclick' of null. 尝试了 window.onload

Question

所以，我对 JavaScript 还比较陌生。虽然我想做的是给 Canvas 上的移动图像一个 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);
       }

应该提醒“Duffy”。