Js 中多个范围滑块输入的代码修复

Question

我正在尝试向我的网页添加多个滑块范围输入，我希望当我使用滑块时，其同级输入的值会发生变化。但我发现只有第一个滑块有效，而其他滑块无效

<div class="form-group my-3 d-flex flex-column">

                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3">               

                                        <label for="formGroupExampleInput" class="important">Revenus nets/mois* <i class="fas fa-info-circle"></i></label>

                                        <input type="text" id="revenue" class="form-control"  placeholder="" value="0"> 

                                    </div>

                                    <input id="RVN" type="range" value="0" min="0" max="7000" step="100"/>

                                </div>

                                <div class="form-group my-3 d-flex flex-column">

                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3">               

                                        <label for="formGroupExampleInput" class="important">Prêt en cours/mois* <i class="fas fa-info-circle"></i></label>

                                        <input type="text" id="pret" class="form-control"  placeholder="" value="0">    

                                    </div>

                                    <input id="val_pret" type="range" value="0" min="0" max="7000" step="100"/>

                                </div>

这似乎是我的 js 函数，我对所有函数都使用相同的方式，但只有第一个有效？

Answer 1

您正在调用输入文本的侦听器var p= document.getElementById('pret');//input-textvar vp = document.getElementById('val_pret');//input-range&nbsp; &nbsp; vp.value = p.value;p.addEventListener('input', function(){ //here is your error&nbsp; &nbsp; vp.value = p.value;}, false);您应该为输入范围调用侦听器，这是修改后的代码var i= document.getElementById('RVN');var o = document.getElementById('revenue');&nbsp; &nbsp; o.value = i.value;i.addEventListener('input', function(){&nbsp; &nbsp; o.value = i.value;}, false);var p= document.getElementById('val_pret');// input-rangevar vp = document.getElementById('pret');// input-text&nbsp; &nbsp; vp.value = p.value;p.addEventListener('input', function(){//solution&nbsp; &nbsp; vp.value = p.value;}, false);var m= document.getElementById('val_mensualite');var vm = document.getElementById('mensualite');&nbsp; &nbsp; vm.value = m.value;m.addEventListener('input', function(){&nbsp; &nbsp; vm.value = m.value;}, false);