单击按钮类或跨度类

Question

我想模拟一个按钮向上或向下的点击，

我试过这个：document.querySelector('button.up')[4].click();

在页面中很少有带有向上和向下按钮的输入字段，我想要 id 为“sl”的字段的向上按钮还是第 n 个向上按钮？ 代码：

<div class="input-text num" >
<input type="text" placeholder="" id="sl" min="0" max="" step="0.00001">
<button tabindex="-1" class="up">
<span class="v"></span></button><
button tabindex="-1" class="down">
<span class="v"></span></button></div>

Answer 1

可能导致问题的第一件事是这一行：

document.querySelector('button.up')[4].click();

导致问题的原因是document.querySelector() 返回匹配提供的选择器的第一个元素或null，如果没有匹配选择器的元素。因此，[4] 的索引符号注定会因设计而失败。

如果没有看到更多的 HTML，很难提供一个完全有效的建议，但我建议使用替代选择器应该可以工作（只要你的 id 属性是唯一的，因为它们必须符合规范）：

document.querySelector('#sl + button.up').click();

const clickHandler = (event) => {
  console.log(`${event.target.outerHTML}`);
}

document.querySelectorAll('button').forEach(
  (button) => button.addEventListener('click', clickHandler)
);

document.querySelector('#sl + button.up').click();

<div class="input-text num">
  <input type="text" placeholder="" id="sl" min="0" max="" step="0.00001">
  <button tabindex="-1" class="up">
<span class="v">up</span></button>
  <button tabindex="-1" class="down">
    <span class="v">down</span></button>
</div>

参考资料：

• document.querySelector()。
• HTMLElement.click()。