有4个这样的加减按钮,如何进行遍历使四个加减按钮随着点击而使value的值也跟着变化,写出具体的代码<div class="num"> <button id="minus">-</button> <input type="text" value=1 id="num-value"> <button id="plus">+</button> </div>
时间: 2023-10-09 09:13:00 浏览: 29
好的,那么针对您提供的 HTML 结构,可以按照以下方式编写 JavaScript 代码来实现四个加减按钮随着点击而使 `value` 的值也跟着变化:
```javascript
let value = 1; // 初始值为1
const numValue = document.getElementById('num-value'); // 获取输入框元素
const minusBtns = document.querySelectorAll('#minus'); // 获取所有减号按钮元素
const plusBtns = document.querySelectorAll('#plus'); // 获取所有加号按钮元素
// 给所有减号按钮添加点击事件监听器
minusBtns.forEach(btn => {
btn.addEventListener('click', () => {
value = Math.max(1, value - 1); // 减1,但不能小于1
numValue.value = value; // 更新输入框的值
});
});
// 给所有加号按钮添加点击事件监听器
plusBtns.forEach(btn => {
btn.addEventListener('click', () => {
value++; // 加1
numValue.value = value; // 更新输入框的值
});
});
```
在这个例子中,我们先定义一个初始值为1的 `value` 变量,并获取了输入框元素、所有减号按钮元素以及所有加号按钮元素。然后,我们使用 `forEach` 方法分别为所有减号按钮和加号按钮添加了点击事件监听器,并在监听器中更新了 `value` 的值,并将其赋值给输入框的 `value` 属性。需要注意的是,对于减号按钮,我们使用了 `Math.max` 方法来确保 `value` 的值不会小于1。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)