如何用JavaScript函数实现点击按钮返回系统日期？解决无显示问题

嘿，别担心，刚接触JavaScript遇到这种小问题太正常啦～我来帮你拆解一下问题出在哪，以及怎么修复：

问题根源 #

你写的dateFunc()里用了this.innerHTML，但直接通过onclick="dateFunc()"调用函数时，函数里的this指向的是全局的window对象，不是按钮元素。给window的innerHTML赋值自然不会在按钮上显示内容啦！

几种修复方案 #

方案1：把按钮元素传入函数 #

修改onclick的调用方式，把当前按钮作为参数传给函数，这样就能直接操作按钮的内容了：

<script>
function dateFunc(btn) { 
  btn.innerHTML = Date(); 
}
</script>
<button onclick="dateFunc(this)">The time is?</button>

方案2：直接在onclick里使用this #

如果逻辑很简单，也可以不用单独写函数，直接在onclick里写逻辑：

<button onclick="this.innerHTML = Date()">The time is?</button>

方案3：使用事件监听（推荐的现代写法） #

这种方式把HTML和JavaScript代码分离，更利于后期维护，也是实际项目里常用的写法：

<button id="dateButton">The time is?</button>

<script>
// 获取按钮元素
const dateBtn = document.getElementById('dateButton');
// 绑定点击事件
dateBtn.addEventListener('click', function() {
  this.innerHTML = Date();
});
</script>

你可以试试上面任意一种方案，都能实现点击按钮显示系统日期的效果～

内容的提问来源于stack exchange，提问作者Alapan Bag