window.onload=function(){}为什么不能执行该计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <form align="center">
        <table>
            开始日期：<input type="text" id="btn1"><br>
            结束日期：<input type="text" id="btn2"><br>
            相差天数：<input type="text" id="btn3"><br>
                <input type="button" value="计算" onclick="calc()"/>
        </table>
    </form>
    <script>
   window.onload=function(){
            function calc(){
            var btn1=new Date(document.getElementById('btn1').value);
            var btn2=new Date(document.getElementById('btn2').value);
            var btn3=(btn1-btn2)/(1000*60*60*24);
                document.getElementById('btn3').value=btn3;
        }}
    </script>
</body>
</html>

这样子就计算不了，即使我把js放在最前面也不行

但是这样就可以，如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <form align="center">
        <table>
            开始日期：<input type="text" id="btn1"><br>
            结束日期：<input type="text" id="btn2"><br>
            相差天数：<input type="text" id="btn3"><br>
                <input type="button" value="计算" onclick="calc()"/>
        </table>
    </form>
    <script>
  
            function calc(){
            var btn1=new Date(document.getElementById('btn1').value);
            var btn2=new Date(document.getElementById('btn2').value);
            var btn3=(btn1-btn2)/(1000*60*60*24);
                document.getElementById('btn3').value=btn3;
        }
    </script>
</body>
</html>

这是为什么呢？

方法提出来 window.onload=方法名不加括号

在三种事件绑定方式中（行内绑定，DOM对象.属性方法，事件监听器方法），行内绑定可以一次性绑定多个事件，但绑定的事件不能在window.onload中。

如果想在onload中执行事件，必须使用dom操作挂载事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>

	</head>
	<body>
		<form align="center">
			<table>
				开始日期：<input type="text" id="btn1"><br>
				结束日期：<input type="text" id="btn2"><br>
				相差天数：<input type="text" id="btn3"><br>
				<input type="button" value="计算" id='calc' />
			</table>
		</form>
		<script>
			window.onload = function() {
				document.getElementById('calc').onclick = function() {
					var btn1 = new Date(document.getElementById('btn1').value);
					var btn2 = new Date(document.getElementById('btn2').value);
					var btn3 = (btn1 - btn2) / (1000 * 60 * 60 * 24);
					document.getElementById('btn3').value = btn3;
				}
			}
		</script>
	</body>
</html>

calc()函数在window.onload=function(){}内定义。
这样calc就是window.onload事件函数中的局部变量（js中函数名就等同变量名）。
calc局部变量只能在window.onload事件函数中访问，在window.onload事件函数之外当然访问不了。

事件没有绑定上吧应该

因为找不到。

onclick="calc()"，其实就是点击的时候运行window.calc()，下面的方法是在全局作用域声明的，此时的函数默认挂载到window上，上面的方法在onload函数内声明的，没有挂载到window上。

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632