Question

我是一个新手，试图根据我在HTML表单中提交的标准编写JS / HTML报告生成器。该计划最终是使用PHP / mySQL来操作数据库并返回结果但是现在我只是想构建HTML / CSS / JS而且我已经卡住了。我已将JS函数归因于<body>中的按钮，如此：

<input type="button" id="reportButton" value="Generate Report" onclick="showCriteria()">

我在<head>中添加了一个脚本，如下所示：

<script>var showCriteria = function(){ My JS code...}</script>。

这个函数只是做一些日期操作，并在同一页面上的div中显示结果，如下所示：

document.getElementById("endDate").innerHTML = "to "+endDay+" "+endMonthName+" "+endYear;

但我得Uncaught TypeError: Cannot set property 'innerHTML' of null。所以我搜索了论坛，发现这有时可能是因为没有等待窗口加载。所以我把脚本包装如下：

<script> window.onload = function() var showCriteria = function(){ My JS code...}

解决了初始错误但我得到Uncaught ReferenceError: showCriteria is not defined

好像我在Catch22。我收到第一个错误，因为脚本在窗口加载之前运行。我通过等待窗口加载来解决这个问题，只是发现HTML正在等待我的脚本定义我的JS函数。

感谢任何建议。

Report Generator screenshot

Window.load script

Answer 1

你几乎得到了解决方案。至少你已经拥有了所有正确的元素。

window.onload = function() {
    document.getElementById('reportButton').addEventListener('click', showCriteria);
};

这将使按钮在页面准备好之前不起作用。

您还需要从按钮中删除 onclick 。

Answer 2

当您将showCriteria功能放在window.onload内时，请确保DOM可以访问window.showCriteria，即<script> window.onload = function() window.showCriteria = function(){ My JS code...} ...。

onclick

除了在html上使用window.onload = function() { document.getElementById('reportButton').addEventListener('click', showCriteria); };之外，您还可以使用添加侦听器来侦听该元素上的click事件。

info.plist

Catch22 - HTML等待JS，JS等待HTML

2 个答案: