Предложения по параметрической обработке доступа к HTML — элементам

#javascript #html

Вопрос:

Я хотел бы иметь возможность параметрически обрабатывать некоторые HTML — элементы с помощью кода Javascript. Более конкретно, я получил некоторый «Вклад».Слайдер» элементы в каждом узле моего HTML-списка элементов в этом формате:

 <ul id="external">
            <li href="#" id="item" data-duration="3600" class="list-group-item list-group-item-action list-group-item-primary"
                onmouseover="SetDuration(),drag()" onclick="ShowDuration()">
                <script>
                    function SetDuration() {
                        var value = document.getElementById('myRange').value;
                        value = value * 30;
                        document.getElementById('item').setAttribute("data-duration", value);
                    }
                </script>
                <div draggable="true" ondragstart="dragstart_handler(event)" data-duration="30"><h5 id="Riders"> Riders</h5></div><p id="duration">Durata(minuti): <span id="demo"></span></p><div class="slidecontainer">
                    <input type="range" min="0" max="240" value="60" step="30" class="slider" id="myRange">
                </div>
            </li>

            <li..    </li>
            <li..    </li>

                                        
 

и у меня есть ряд функций, которые обрабатывают индивидуально каждый вид компонента слайдера таким образом:

 function ShowDuration() {
    var htmlShow = document.getElementById("myRange");
    var htmlShow1 = document.getElementById("duration");
    if (htmlShow.style.display === "none") {
        htmlShow.style.display = "block";
        htmlShow1.style.display = "block";
    } else {
        htmlShow.style.display = "none";
        htmlShow1.style.display = "none";
    }
}

function ShowDuration1() {
    var htmlShow = document.getElementById("myRange1");
    var htmlShow1 = document.getElementById("duration1");
    if (htmlShow.style.display === "none") {
        htmlShow.style.display = "block";
        htmlShow1.style.display = "block";
    } else {
        htmlShow.style.display = "none";
        htmlShow1.style.display = "none";
    }
}

function ShowDuration2() {..
 

и мне было интересно, возможно ли создать единый скрипт для обработки каждого представления компонента слайдера в результате доступа к «списку узлов».
Я знаю, что в JS нет ничего о «Коллекциях.списках», и я пытался использовать массивы без хороших результатов, так как мне приходится обрабатывать список элементов не фиксированной длины. Я начал программировать на JS не так давно, поэтому у меня не так много идей, на которые можно потратить. Любые советы по этому поводу, как всегда, более чем ценны. Спасибо Всем.

Luca