如何将滑块和复选框链接到计数器?

Question

我是JavaScript新手。我正试图将滑块和复选框链接到计数器。滑块应该根据范围增加计数器的值。然后复选框根据用户(滑块的值是用户，我将在后面解释)有固定值，如果复选框被选中或不选中，它们应该添加到计数器中。

var slider = document.querySelector('#myRange');                               //Input
var output = document.querySelector("#value-range");                           //Output
let rangeValue = document.querySelector('#final-price');                       //Counter
const boxesContainer = document.querySelector('.price-boxes__container');      //Checkboxes

我为复选框创建了一个事件，所以当你点击它时，会添加值。

boxesContainer.onchange = function(e) {
if (e.target.classList.contains('checkbox')){
const price = parseInt(e.target.getAttribute('value'))
if (e.target.checked === true) {
total += price;
} else {
total -= price;
}
rangeValue.innerHTML = total
}
}

我还为滑动条创建了另一个事件

slider.oninput = function () {
let value = slider.value;
userPrice(value)    
output.style.left = (value/2.88);
output.classList.add("show");
rangeValue.innerHTML = prices[value-25];

function userPrice (value) {
if (value == 25) {
output.innerHTML = '6 €p'
} else {
output.textContent = `${prices[value-25] - prices[value-26]} €p`;
}
}
}

滑块最小25，最大1000,step = 1, value = 25。每一步都是一个用户。我创建了一个数组，它的价格取决于滑块的值。26-50名用户6欧元/人，51-250名用户4欧元/人，251-500名用户3欧元/人，501-1000名用户2欧元/人。因此，我认为最简单的方法是创建一个数组，并使用滑块的值将价格发送给计数器。

const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
let rangePrices = range(25, 1000, 1);
const prices = [];
rangePrices.forEach((rangeValue, i)=> {
if(rangeValue === 25) {
prices.push(299)
} else if (rangeValue < 51) {
prices.push(prices[i-1] + 6)
} else if (rangeValue < 251){
prices.push(prices[i-1] + 4)
} else if (rangeValue < 501) {
prices.push(prices[i-1] + 3)
} else {
prices.push(prices[i-1] + 2)
}
});

但是在最后，当我点击复选框时，计数器添加复选框的值，但它重置。我知道我有两个rangeValue。innerHTML，是由于这一点，它不工作，但我不知道如何修复它…

正如我在开始时所说的，复选框取决于滑动条的值。在26-50 - 0.7€/p.u.之间。， 51-250 0.5€/p.u。， 251-500 0.4€/p.u。501-1000 0.3€/p.u…因此，复选框与滑块相关。我也不知道如何连接这两个功能。最后说还有两个复选框。

如果有人能帮我，那就太好了!https://jsfiddle.net/NilAngelats/wq7tjh8c/

Answer 1

我是这样做的:

let total = 0;
boxesContainer.onchange = function(e) {
...
rangeValue.innerHTML = prices[slider.value - 25] + total
}
slider.oninput = function() {
...
rangeValue.innerHTML = prices[value - 25] + total;
}

并将userPrice函数从slider.oninput函数中移出，这样它只声明一次，而不是每次移动滑块时都声明一次。