Selam arkadaşlar. Sayfalarıma JS ekleyerek slider range ekliyorum. Footere <script src="assets/js/scripts..js"></script> ekledim.
1. ve 2. Sayfamdaki id değerlerini değiştirmeme rağmen sadece tek bir sayfada çalışıyor diğerinde çalışmıyor.
scripts.js ye ekledim sliderrange kodunu alıp id2 olarak tanımladığımda HTML'den değiştiriyorum yine çalışmıyor.
Ancak <script src="assets/js/scripts2..js"></script> footere ekleyip id2 olarak çağırdığımda HTML'den çalışıyor.
kafayı yiyeceğim bir türlü tek bir js dosyasından farklı sayfalara çağıramadım. Aşağıdaki JS kodum çoklu çağırmaya yönelik o da çalıştırmadı.
Normalde sliderrangeyi id atayarak çağırıyorum yine 2.sayfada çalışmıyor.
Nerede nasıl bir hata yapıyorum? footere farklı js dosyası ekleyip HTML den çağırıp çalıştırıyorum oluyor ama bu sefer onlarca js dosyası olacak.


1. Sayfada ki HTML kodum

<div class="d-flex flex-column text-center mb-5">
<div class="d-flex align-items-start justify-content-center mb-7">
<span class="fw-bold fs-3x" id="selectedValue1">0.1</span>
</div>
<input type="range" min="0.1" max="1.0" step="0.1" value="0.1" id="SliderRange1">
</div>
<script>
initSliderRange('SliderRange1', 'selectedValue1');
</script>

2. Sayfada ki HTML kodum

<div class="d-flex flex-column text-center mb-5">
<div class="d-flex align-items-start justify-content-center mb-7">
<span class="fw-bold fs-3x" id="selectedValue2">0.1</span>
</div>
<input type="range" min="0.1" max="1.0" step="0.1" value="0.1" id="SliderRange2">
</div>
<script>
initSliderRange('SliderRange2', 'selectedValue2');
</script>

Birden fazla ID tanımlayarak çağırdığım JS kodum.

function initSliderRange(sliderId, valueId) {
    var range = document.getElementById(sliderId);
    var rangeValue = document.getElementById(valueId);

    range.addEventListener('input', function () {
        var value = parseFloat(range.value).toFixed(1);
        rangeValue.textContent = value;
    });
}
initSliderRange('SliderRange1', 'selectedValue1');
initSliderRange('SliderRange2', 'selectedValue2');

ID Atanmış JS

var range1 = document.getElementById('SliderRange1');
var rangeValue1 = document.getElementById('selectedValue1');

range1.addEventListener('input', function () {
    var value = parseFloat(range1.value).toFixed(1);
    rangeValue1.textContent = value;
});