如何 link 滑块和复选框到计数器？

Question

我是 JavaScript 的新人。我正在尝试 link 一个滑块和一个计数器复选框。滑块应根据范围增加计数器的值。然后复选框根据用户（滑块的值是用户，我将在稍后解释）固定值，如果选中或不选中，它们应该添加到计数器。

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，步长 = 1，值 = 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.. 因此，复选框与滑块相关。我也不知道如何 link 这两个函数。最后说多了2个checkbox。

如果有人能帮助我就太好了！

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 函数，这样它只声明一次，而不是每次移动滑块时都声明。

如何 link 滑块和复选框到计数器？

How to link a slider and checkbox to a counter?

javascript

checkbox

jquery

slider