js怎么让动态生成的input的值随着当前修改的对应的input中输入的值改变
时间: 2023-09-18 11:13:55 浏览: 200
可以使用事件委托,在文档中绑定一个事件处理程序,然后在事件处理程序中获取当前修改的input的值,并将该值赋给动态生成的input的value属性,从而实现动态更新。具体代码可以参考如下:
```javascript
// 绑定事件处理程序
document.addEventListener('input', function(event) {
// 判断当前修改的元素是否为input
if (event.target.tagName.toLowerCase() === 'input') {
// 获取当前修改的input的值
var value = event.target.value;
// 获取所有动态生成的input元素
var dynamicInputs = document.querySelectorAll('.dynamic-input');
// 遍历所有动态生成的input元素,将当前修改的input的值赋给它们的value属性
for (var i = 0; i < dynamicInputs.length; i++) {
dynamicInputs[i].value = value;
}
}
});
```
这段代码会监听整个文档中的input事件,当用户修改任意一个input元素的值时,会触发该事件处理程序。在事件处理程序中,首先判断当前修改的元素是否为input元素,如果是,则获取它的值。然后,使用querySelectorAll方法获取所有动态生成的input元素,遍历它们,并将当前修改的input的值赋给它们的value属性,从而实现动态更新。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)