javascript - JS函数不会在按钮单击时初始化
问题描述
当我在函数中添加括号时，它会立即初始化，告诉我它的语法并不差，但是当我删除它们时，它不会在单击时启动。帮助将不胜感激谢谢。
<nav class="nav-box">
<div class="nav-header">
<h1> heading here </h1>
</div>
<div>
<ul class="main-nav">
<li><a id='about-btn' class='button nav' href="#">about</a></li>
<li><a id='services-btn' class='button nav' href="#" >services</a></li>
<li><a id='contact-btn' class='button nav' href="#">contact</a></li>
</ul>
</div>
</nav>
let about_button = document.getElementById('about-btn');
about_button.onclick=scroll
function scroll(){
let scroller = {
top: 950,
left: 0,
behavior : "smooth"
}
window.scrollBy(scroller);
}
解决方案
首先你的身体没有足够的包容。您的 html 正文需要高度超过 950 像素。然后你需要把 addEventListener 与点击事件
let about_button = document.getElementById('about-btn');
about_button.addEventListener('click',(e)=>{
e.preventDefault();
console.log("Trigger");
let scroller = {
top: 950,
left: 0,
behavior : "smooth"
}
window.scrollBy(scroller);
}) <nav class="nav-box">
<div class="nav-header">
<h1> heading here </h1>
</div>
<div>
<ul class="main-nav">
<li><a id='about-btn' class='button nav' href="#">about</a></li>
<li><a id='services-btn' class='button nav' href="#" >services</a></li>
<li><a id='contact-btn' class='button nav' href="#">contact</a></li>
</ul>
</div>
</nav>
<p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p>推荐阅读
- asp-classic - 经典asp：MSXML3 dll ServerXMLHTTP
- grafana - 仅使用一个特定变量授予对仪表板的访问权限
- excel - 发送带有条件 RangetoHTML 范围的 Smtp 电子邮件
- orbeon - 如何计算重复重复网格的数量 - orbeon 2020.1CE
- reactjs - 在 react.js 下拉列表中添加自定义选项以及如何填充
- rest - Nestjs（graphql）中不同类型的异常处理
- android - 如何处理 Android 设备上由 PC 创建的文件？API 级别 29
- python - 使用 Sympy 的最大似然函数返回空列表
- javascript - 如何在 Wordpress 中制作基本的 Javascript 代码段
- java - 执行操作后在 InputStream 中丢失内容