JavaScript函数调用显然没有启动

我正在使用HTML5画布创建一个简单的基于web的游戏

当前，当我的页面加载时，画布上的随机位置会显示许多图像，用户需要将其拖动到正确的位置

这很好，但我想在画布上添加一个开始按钮，用户必须在显示这些图像之前单击该按钮才能开始玩游戏

我的index.html页面中有以下JS函数：

window.onload = function(){
    var sources = [];
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        sources[4] = document.getElementById("fridge").src,
        sources[5] = document.getElementById("land").src,
        sources[6] = document.getElementById("money").src,
        sources[7] = document.getElementById("oven").src,
        sources[8] = document.getElementById("table").src,
        sources[9] = document.getElementById("van").src,

        sources[10] = document.getElementById("burger").src,
        sources[11] = document.getElementById("chips").src,
        sources[12] = document.getElementById("drink").src,
        sources[13] = document.getElementById("franchiseFee").src,
        sources[14] = document.getElementById("wages").src,

        sources[15] = document.getElementById("admin").src,
        sources[16] = document.getElementById("cleaners").src,
        sources[17] = document.getElementById("electricity").src,
        sources[18] = document.getElementById("insurance").src,
        sources[19] = document.getElementById("manager").src,
        sources[20] = document.getElementById("rates").src,
        sources[21] = document.getElementById("training").src,
        sources[22] = document.getElementById("water").src,

        sources[23] = document.getElementById("burger").src,
        sources[24] = document.getElementById("chips").src,
        sources[25] = document.getElementById("drink").src,

        sources[26] = document.getElementById("creditors").src,
        sources[27] = document.getElementById("electricity").src,
        sources[28] = document.getElementById("food").src,
        sources[29] = document.getElementById("hirePurchase").src,
        sources[30] = document.getElementById("loan").src,
        sources[31] = document.getElementById("overdraft").src,
        sources[32] = document.getElementById("payeTax").src,
        sources[33] = document.getElementById("tax").src

    drawStartButton();
    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();

};

在这个函数末尾，对其他函数的所有函数调用都被调用，并执行它们预期的函数，除了

drawStartButton（）一，我刚刚添加的

我不太明白为什么这个函数没有被调用。。。
drawStartButton（）的代码
位于单独的JS文件中，如下所示：

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 410.5, 120);
            };
            image.src = startButton;

我是否需要引用存储函数的文件？我还没有完成其他函数调用，它们与
drawStartButton（）
位于同一个JS文件中

有人知道为什么不调用此函数，以及我如何确保调用它吗？
在后面添加分号：

sources[33] = document.getElementById("tax").src

（只是良好做法）

另外，在尝试获取它们的
src
之前，请确保所有这些元素都存在（并且都已加载）（但是您已经有了
onload
，所以这应该没问题。）

现在，您可以简化所有这些
getElementById
：

var sources = [],
    sourceNames = [
    'building',  'chair',       'drink',       'food',         'fridge',  'land',      'money',    'oven', 'table', 'van',
    'burger',    'chips',       'drink',       'franchiseFee', 'wages',                
    'admin',     'cleaners',    'electricity', 'insurance',    'manager', 'rates',     'training', 'water',
    'burger',    'chips',       'drink',                       
    'creditors', 'electricity', 'food',        'hirePurchase', 'loan',    'overdraft', 'payeTax',  'tax'
];

for(var i = 0, l = sourceNames.length; i < l; i++){
    sources[i] = document.getElementById(sourceNames[i]).src;
}

您将看到最后获得的元素

您还必须确保首先加载包含
drawStartButton（）
函数的文件，否则，此函数将不存在

最后：

替换
image.src=startButton带有
image.src=startButton.src
您需要确保在html文件中包含这个javascript文件之前，您已经包含了另一个javascript文件，然后一切都应该正常工作。还要确保用
}
关闭函数体，尽管我感觉这是复制粘贴错误

正如其他人所解释的，你需要；要在JavaScript中结束每个语句。
< P>而不是在JavaScript代码中拥有这个长的应用程序特定的ID名称，您应该考虑通过它们有共同的类来抓取这些HTML元素。
<img class="preload_image" src"...">



在javascript中，类似

var preload_images = document.getElementsByClassName('preload_image');
var sources = [];
for(var i = 0;i < preload_images.length;i++){
sources.push(preload_images[i].src);
}

var preload_images=document.getElementsByClassName（'preload_image'）；
风险值来源=[]；
对于（var i=0；i

这是为了保持代码的整洁，您可以通过向标记中添加一个类而不是添加标记，然后转到js文件并将标记的id添加到源代码列表中来确保预加载某些内容。而且您的代码仍然更灵活，因为您可以在任何其他项目中简单地使用它，而无需对其进行任何更改。
如果错误是
getElementsById
为
null
的其中一个，则不会调用其他函数。“但他们就像奥普说的那样。@Amberlamps:我刚才看到了，是的。。。“对于与drawStartButton（）位于同一JS文件中的其他函数调用，”我不太确定那里出了什么问题。OP没有说明
drawStartButton（）函数中的
image
变量。他应该在该函数中
console.log
，然后检查它是否未运行，或者如果它只是不做任何事情。是的，我猜调用了
drawStartButton（）
，但根本没有做任何事情。这是一个很好的建议，但不是答案。另外，并非所有浏览器都支持
getElementsByClassName
。下次我将写评论。只要没有关于image var来自何处的信息（这可能是他的代码不起作用的原因），我认为这将是更好的代码结构的一个很好的提示。当然，要做查询元素之类的事情，应该使用jquery来防止兼容性错误
image
只是一个变量，我用
var image=new image（）行声明了它以保存在该点使用的图像。
var preload_images = document.getElementsByClassName('preload_image');
var sources = [];
for(var i = 0;i < preload_images.length;i++){
sources.push(preload_images[i].src);
}