javascript - 单击按钮类或跨度类
问题描述
我想模拟向上或向下单击按钮,
我试过这个: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>
解决方案
可能导致问题的第一件事是这一行:
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>
参考:
推荐阅读
- reactjs - 渲染道具 - 一些组件配置后需要执行功能
- git - 是否可以用悲观的方法在单个分支上工作?
- node.js - Android - 房间里的 Socket.io 客户端
- ruby-on-rails - 选择其他选项时图表的动态变化
- swift - Xcode Swift,地理位置不会显示我在哪里
- c++ - CMake 不会先构建添加的子目录
- c# - 使用asp.core html标签生成带有Route属性的Action链接
- java - 使用 websphere liberty 应用程序从经典 websphere 应用程序访问远程 ejb
- asp.net-core - 如何将 DisplayNameFor 与类常量一起使用?
- node.js - 找不到路由 404 问题