时间戳

首页 > 解决方案 > 为什么我的段落 textContent 在瞬间闪烁其值后消失了？

javascript - 为什么我的段落 textContent 在瞬间闪烁其值后消失了？

问题描述

我是 JavaScript 和 HTML 的新手，正在尝试自己从头开始学习。

在我下面的代码中，“嗨！”这个词 在“点击我！”下方闪烁一瞬间。按钮，然后完全消失。为什么这种情况不断发生？

注意：我阅读了其他一些关于提交与按钮类型和表单刷新的帖子。我什至没有在这里使用表单标签，而且我在我的 HTML 文件中也明​​确提到了type = "button" 。

document.querySelector("#text").textContent = document.querySelector("#B1").addEventListener("click", showDate);

function showDate(event) {
let week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
let date = new Date();
let day = week[date.getDay()];
let month = months[date.getMonth()];
let year = date.getFullYear();
let dayOfMonth = date.getDate();
return(`Today is ${day}, ${dayOfMonth} ${month}, ${year}.`);
}
<html>
<body>
    <button id="B1" type="button" >Click Me!</button>
    <p id="text">Hi!</p>
    <script src="Scripts/test2.js"></script>
</body>
</html>

感谢任何解决方案！

标签： javascripthtml

解决方案

您无法获得将在 addEventListener 中调用的方法的结果，因为它是一个回调函数并且回调函数不返回任何内容。

与基于回调的 API 的主要区别在于它不返回值，它只是使用结果执行回调。[..]

要解决此问题，您可以删除=之前的部分

document.querySelector("#B1").addEventListener("click", showDate);

并在您的showDate()函数中执行 textContent 分配并删除返回。

document.querySelector("#B1").addEventListener("click", showDate);

function showDate(event) {
let week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
let date = new Date();
let day = week[date.getDay()];
let month = months[date.getMonth()];
let year = date.getFullYear();
let dayOfMonth = date.getDate();
document.querySelector('#text').textContent = `Today is ${day}, ${dayOfMonth} ${month}, ${year}.`;
}
<html>
<body>
    <button id="B1" type="button" >Click Me!</button>
    <p id="text">Hi!</p>
    <script src="Scripts/test2.js"></script>
</body>
</html>

在这里你可以阅读更多

推荐阅读