.js çağırma problemi

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;
});

anladığım kadarıyla sıralama sorunu mevcut. aşağıdaki şekilde dener misiniz?

<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 src="script.js"></script>

Sıralama sorunu değil. Tek bir .js dosyasından slider range kodunu sayfa1.php ye çağırıyorum çalışıyor ama sayfa2.php ye de çağırınca çalışmıyor.
Farklı ID tanımlıyorum yine sayfa2 çalışmıyor. js kodlarını alıp çoğaltıyorum altına id değiştiriyorum yine çağırmıyor.
Ancak farklı script2.js footere eklersem çalışıyor. HTML satır içi kod kullanmak istemiyorum çünkü aşırı derecede js kodlarım var.

2. sayfa ajax ile mi yükleniyordu ? örnek görebileceğimiz yer var mıdır daha net bişey söyleyebilirim.

localhostta çalışıyorum hocam. 2. sayfaya ajax ile değil div id ile çağırıyorum.

Örnek olarak script.js kodlarım aşağıdaki gibi. HTML tarafında id değiştirerek eklemeye çalışıyorum.
Ekleme: // Slider 2 kodlarını script2.js olarak eklersem bu sefer diğer sayfalarda çalışıyor.
Ama bu şekilde onlarca javascript çağırmak zorunda kalacağım. Tek istediğim tek bir js dosyasından tüm istediğim sayfalara kodları div id ile çağırmak.

// ürünlerdeki Dropzone
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzone", {
url: "/upload.php",
maxFiles: 10,
maxFilesize: 10, // MB
    acceptedFiles: ".jpg, .jpeg, .png, .webp, .ico, .gif"
});

// CKEditör 5
DecoupledEditor
    .create(document.querySelector('#editor'))
.then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
})
.catch(error => {
console.error(error);
});

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

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

// Slider2
var range2 = document.getElementById('SliderRange2');
var rangeValue2 = document.getElementById('selectedValue2');

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

kopyala yapıştırdan sanırım iki kere range1 eklenmiş. aşağıdaki şekilde yapınca çalışıyor muydu?

// Slider1
var range1 = document.getElementById('SliderRange1');
var rangeValue1 = document.getElementById('selectedValue1');
 
range1.addEventListener('input', function () {
var value = parseFloat(range1.value).toFixed(1);
rangeValue1.textContent = value;
});
 
// Slider2
var range2 = document.getElementById('SliderRange2');
var rangeValue2 = document.getElementById('selectedValue2');
 
range2.addEventListener('input', function () {
var value = parseFloat(range2.value).toFixed(1);
rangeValue2.textContent = value;
});

https://jsfiddle.net/n0up5s3c/

burada sizin gönderdiğiniz kodlardan anladığım şekilde yapmaya çalıştığımda sorun gözükmüyor :/

Düzelttim hocam kopyala yapıştır yaparken yanlış yapmışım 1 ve 2 olarak sizin yazdığınız kodlar aynı o şekilde. Ancak tek bir js dosyasından farklı sayfalara çağıramıyorum.
Kafayı yedirecek lanet olasıca. jsfiddle kısmında çalışıyor evet ama sorun nedir bilmiyorum bir çakışma söz konusu. Diğer js dosyalarımın içine atıyorum 2 yi bu sefer çalışıyor ama diğer js içindeki kodların çalışmasına engel oluyor.

Merhaba her iki HTML dosyasında da common.js dosyasını çağırarak, initSliderRange fonksiyonunu paylaştık. Böylece her iki sayfa da aynı JavaScript kodunu kullanacak ve sorununuz çözülebilir diye düşünüyorum.


// common.js dosyası bir ortak js component gibi düşünün

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;
    });
}

Sayfa 1 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa 1</title>
</head>
<body>

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

<!-- common.js dosyasını çağır -->
<script src="assets/js/common.js"></script>

<!-- SliderRange1 için özel çağrı -->
<script>
    initSliderRange('SliderRange1', 'selectedValue1');
</script>

</body>
</html>

Sayfa 2 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa 2</title>
</head>
<body>

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

<!-- common.js dosyasını çağır -->
<script src="assets/js/common.js"></script>

<!-- SliderRange2 için özel çağrı -->
<script>
    initSliderRange('SliderRange2', 'selectedValue2');
</script>

</body>
</html>