简单es6小案例

JS按钮值显示案例

最新推荐文章于 2022-08-15 17:03:04 发布

原创最新推荐文章于 2022-08-15 17:03:04 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

按钮小案例专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的JavaScript案例，通过给多个按钮绑定点击事件来显示每个按钮对应的值。使用了querySelectorAll选择器获取所有按钮元素，并遍历这些元素设置点击事件。

一个小案例

当点击按钮时，显示自己的value值

代码如下图所示

<input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />

    <!-- 当点击按钮时，显示自己的value值 -->
    <script>
        let btns = document.querySelectorAll('input')
        console.log(btns)



        for (let i = 0; i < btns.length; i++) {
            const btn = btns[i];
            btn.onclick = function () {
                alert(this.value)
            }
        }
    </script>