Javascript 分配并计算分数，保持选中状态

我正在寻找一个类似的解决方案，他的，但没有选择/选项，因为我不能有一个下拉列表！ 因此，我在页面上有多个div，我需要为它们分配分数，并根据页面上选择的元素计算总分数。我希望有人能帮忙-将非常感谢

应该计数的元素显示在滑块中，因此看起来如下所示：

选择你的分数

                <div class="slider-test-1">

                <div class="slider-test">
                    <div class="slider-score">
                    <div class="slider-score-section" ><h2 class="heading-t2">1</h2></div>
                    <div class="slider-score-section" ><h2 class="heading-t2">2</h2></div>
                    <div class="slider-score-section" ><h2 class="heading-t2">3</h2></div>
                    </div>
                    <p class="test-text">Description
                    </p>
                </div>
                        
                    <div class="slider-test">
                        <div class="slider-score">
                            <div class="slider-score-section" ><h2 class="heading-t2">4</h2></div>
                            <div class="slider-score-section"><h2 class="heading-t2">5</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">6</h2></div>
                            </div>
                        <p class="test-text">Description
                        </p>
                    </div>

                    <div class="slider-test">
                        <div class="slider-score">
                            <div class="slider-score-section" ><h2 class="heading-t2">7</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">8</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">9</h2></div>
                            </div>
                        <p class="test-text">Description
                        </p>
                    </div>

                    <div class="slider-test">
                        <div class="slider-score">
                            <div class="slider-score-section" ><h2 class="heading-t2">10</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">11</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">12</h2></div>
                            </div>
                        <p class="test-text">Description
                        </p>
                    </div>

                </div>

1.
2.
3.
说明

4.
5.
6.
说明

7.
8.
9
说明

10
11
12
说明

1.
2.
3.
说明

4.
5.
6.
说明

7.
8.
9
说明

10
11
12
说明

0

分数值为1-12，如每个滑块标题中所述，总分数应为每个滑块上获得的分数（例如，滑块1的6+滑块2的8=14）。 如果您能提供帮助，请提前感谢

const totalDiv=document.querySelector（“.total”）
常量滑块核心=[0,0]
函数updateTotal（）{
totalDiv.textContent=滑块核心[0]+滑块核心[1]
}
document.querySelectorAll（'.slider-1-score-section'）.forEach（scoreSection=>{
scoreSection.addEventListener（'单击'，（事件）=>{
sliderScores[0]=parseInt（event.target.textContent，10）
updateTotal（）
})
})
document.querySelectorAll（'.slider-2-score-section'）.forEach（scoreSection=>{
scoreSection.addEventListener（'单击'，（事件）=>{
sliderScores[1]=parseInt（event.target.textContent，10）
updateTotal（）
})
})

.slider-1-score-section{
背景色：#cdb0b0；
}
.滑块-2-分数段{
背景色：#bce0ba；
}

0
1.
2.
3.
说明

4.
5.
6.
说明

7.
8.
9
说明

10
11
12
说明

1.
2.
3.
说明

4.
5.
6.
说明

7.
8.
9
说明

10
11
12
说明

非常感谢Stefan，这非常有效！！我仍然在尝试添加一个函数，它可以更改所选分数的外观。我的问题是，我不知道如何在每张幻灯片上只允许一个选项。。你能给我个建议吗？问题是：您需要使用document.getElementsByClassName（'slider-1-score-section'）而不是document.getElementsByTagName（'slider-1-score-section'）。

                <div class="slider-test">
                    <div class="slider-score">
                    <div class="slider-score-section" ><h2 class="heading-t2">1</h2></div>
                    <div class="slider-score-section" ><h2 class="heading-t2">2</h2></div>
                    <div class="slider-score-section" ><h2 class="heading-t2">3</h2></div>
                    </div>
                    <p class="test-text">Description
                    </p>
                </div>
                        
                    <div class="slider-test">
                        <div class="slider-score">
                            <div class="slider-score-section" ><h2 class="heading-t2">4</h2></div>
                            <div class="slider-score-section"><h2 class="heading-t2">5</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">6</h2></div>
                            </div>
                        <p class="test-text">Description
                        </p>
                    </div>

                    <div class="slider-test">
                        <div class="slider-score">
                            <div class="slider-score-section" ><h2 class="heading-t2">7</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">8</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">9</h2></div>
                            </div>
                        <p class="test-text">Description
                        </p>
                    </div>

                    <div class="slider-test">
                        <div class="slider-score">
                            <div class="slider-score-section" ><h2 class="heading-t2">10</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">11</h2></div>
                            <div class="slider-score-section" ><h2 class="heading-t2">12</h2></div>
                            </div>
                        <p class="test-text">Description
                        </p>
                    </div>

                </div>
            </div>
            <div class="total">0</div>