如何为Onclick事件设置默认参数？未点击时自动传入参数1

我懂你的需求啦——想要页面初始化时自动用参数1触发getItems函数，用户点击对应链接时再传递点击触发的参数。咱们一步步调整代码来实现：

1. 修正函数逻辑 #

先把原函数里的赋值逻辑理清楚，避免不必要的混淆：

function getItems(value, object) {
  // 接收并存储参数
  const parameter = value;
  // 如果需要更新点击元素的显示内容，再单独处理
  if (object) {
    object.innerHTML = value;
  }
  console.log('当前使用的参数:', parameter);
  // 这里写调用API的逻辑，比如：
  // fetch(`你的API地址?param=${parameter}`)
  //   .then(res => res.json())
  //   .then(data => { /* 处理返回数据 */ })
}

2. 添加默认调用（页面加载自动执行） #

要实现「未点击时默认用参数1」，咱们只需要在页面DOM加载完成后，自动调用一次getItems('1')就行，两种简单方式任选：

方式一：监听DOM加载完成事件 #

// 等页面所有元素加载完毕后执行默认调用
document.addEventListener('DOMContentLoaded', function() {
  getItems('1');
});

方式二：直接在脚本末尾调用 #

如果你的<script>标签放在</body>标签之前（推荐的脚本放置位置），可以直接写：

// 页面加载完成后自动触发默认参数调用
getItems('1');

3. 完善HTML的点击事件 #

确保每个链接都正确传递参数和自身元素（如果需要更新显示的话）：

<div class="vertical-menu">
  <div class="col-12">
    <a onclick="getItems('1', this)">参数1</a>
    <a onclick="getItems('2', this)">参数2</a>
    <a onclick="getItems('3', this)">参数3</a>
  </div>
</div>

这样调整后，页面刚打开就会自动用参数1执行函数逻辑，用户点击不同链接时，就会切换成对应参数啦！

内容的提问来源于stack exchange，提问作者Mu Lem