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-text

var vp = document.getElementById('val_pret');//input-range

    vp.value = p.value;

p.addEventListener('input', function(){ //here is your error

    vp.value = p.value;

}, false);

您应该为输入范围调用侦听器，这是修改后的代码

var i= document.getElementById('RVN');

var o = document.getElementById('revenue');

    o.value = i.value;

i.addEventListener('input', function(){

    o.value = i.value;

}, false);

var p= document.getElementById('val_pret');// input-range

var vp = document.getElementById('pret');// input-text

    vp.value = p.value;

p.addEventListener('input', function(){//solution

    vp.value = p.value;

}, false);

var m= document.getElementById('val_mensualite');

var vm = document.getElementById('mensualite');

    vm.value = m.value;

m.addEventListener('input', function(){

    vm.value = m.value;

}, false);