[英]code fix for multiple range slider inputs in Js
我正在嘗試將多個 slider 范圍輸入添加到我的網頁,我希望當我使用 slider 時,其兄弟輸入的值會發生變化。 但我發現只有第一個 slider 有效,其他無效
<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>
<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">Mensualité souhaitée* <i class="fas fa-info-circle"></i></label>
<input type="text" id="mensualite" class="form-control" placeholder="" value="0">
</div>
<input id="val_mensualite" type="range" value="0" min="0" max="1000000000000" step="10000"/>
</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" disabled>Apport personnel <i class="fas fa-info-circle"></i></label>
<input type="text" id="apport_personnel" class="form-control" placeholder="" value="0">
</div>
<input id="val_apport" 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">Durée du prêt <i class="fas fa-info-circle"></i></label>
<input type="text" id="duree" class="form-control" placeholder="" value="0">
</div>
<input id="val_duree" type="range" value="0" min="0" max="60" step="5"/>
</div>
這似乎是我的 js 函數,我對所有函數都使用相同的方式,但只有第一個函數有效?
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('pret');
var vp = document.getElementById('val_pret');
vp.value = p.value;
p.addEventListener('input', function(){
vp.value = p.value;
}, false);
var m= document.getElementById('mensualite');
var vm = document.getElementById('val_mensualite');
vm.value = m.value;
m.addEventListener('input', function(){
vm.value = m.value;
}, false);
var d= document.getElementById('duree');
var vd = document.getElementById('val_duree');
vd.value = d.value;
d.addEventListener('input', function(){
vd.value = d.value;
}, false);
您正在為輸入文本調用偵聽器
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.