输入滑块，输入时带有动态计算

Question

I have a few issues with my code. 我的代码有一些问题。 I want to be able to change the sliders and with javascript dynamically calculate and update the results. 我希望能够更改滑块并使用javascript动态计算和更新结果。 I can not get it to work as intended. 我无法使其按预期工作。

Problems: 问题：

When I change the sliders, the addition, subtraction and division is not being calculated and the elements are not updated. 当我更改滑块时，不会计算加法，减法和除法，并且不会更新元素。
When I manually change the sliders value by user keyboard input in the inputs with type="number" , the background of the slider and the span element with class="range-slider__value" is not updating. 当我手动改变由用户的键盘输入滑块值在inputs与type="number" ，滑块和背景span与元件class="range-slider__value"没有更新。 It is working as intended when i move the slider button. 当我移动滑块按钮时，它按预期工作。

Best regards, 最好的祝福，
Frank 坦率

 // colors of sliders const settings={ fill: '#1abc9c', background: '#d7dcdf' } // find all sliders const sliders = document.querySelectorAll('.range-slider'); // Iterate through that list of sliders Array.prototype.forEach.call(sliders,(slider)=>{ // Look inside slider for our input add an event listener slider.querySelector('input').addEventListener('input', (event)=>{ // 1. apply value to the span slider.querySelector('span').innerHTML = event.target.value; // 2. applyfill to the input applyFill(event.target); }); // Don't wait for the listener, apply it now. applyFill(slider.querySelector('input')); }); // This function applies the fill to the sliders function applyFill(slider) { // turn value into a percentage to figure out how far it is in between the min and max of our input const percentage = 100*(slider.value-slider.min)/(slider.max-slider.min); // create a linear gradient that separates at the above point // background color will change here const bg = `linear-gradient(90deg, ${settings.fill} ${percentage}%, ${settings.background} ${percentage+0.1}%)`; slider.style.background = bg; } // Store input as vars and do math. function updateValue() { var firstNum = document.querySelector('input[name=amountInput]').value; var secondNum = document.querySelector('input[name=amountInput]').value; var addition = firstNum + secondNum; var subtraction = firstNum - secondNum; var division = firstNum / secondNum; document.querySelector('.addition').innerHTML = addition; document.querySelector('.subtraction').innerHTML = subtraction; document.querySelector('.division').innerHTML = division; } function firstNumSliderChange(val) { document.querySelector('.output').innerHTML = val; updateValue(); } function secondNumSliderChange(val) { document.querySelector('.output-two').innerHTML = val; updateValue(); }

 h5 {margin:0;padding:0;} .range-slider__range { -webkit-appearance: none; height: 10px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; width:250px; } .final-outputs { display:flex; align-items:center; width:400px; justify-content: space-between; background: #eee; padding:1rem; } .addition, .subtraction, .division { display:flex; justify-content: center; margin-top:.1rem; }

 <body> <form> <div class="range-slider"> <input class="range-slider__range" type="range" name="amountRange" min="0" max="1000" value="0" oninput="this.form.amountInput.value=this.value" /> <input class="output" type="number" name="amountInput" min="0" max="1000" value="0" oninput="this.form.amountRange.value=this.value" /> <span class="range-slider__value">0</span> </div> </form> <form> <div class="range-slider"> <input class="range-slider__range" type="range" name="amountRange" min="0" max="1000" value="0" oninput="this.form.amountInput.value=this.value" /> <input class="output-two" type="number" name="amountInput" min="0" max="1000" value="0" oninput="this.form.amountRange.value=this.value" /> <span class="range-slider__value">0</span> </div> </form> <div class="final-outputs"> <div class="final-output final-output--add"> <h5>addition</h5><span class="addition">1</span></div> <div class="final-output final-output--sub"> <h5>subtraction</h5><span class="subtraction">2</span></div> <div class="final-output final-output--div"> <h5>division</h5><span class="division">3</span></div> </div> </body>

Answer 1

Addition, subtraction and division is not being calculated as the firstNumSliderChange and the secondNumSliderChange functions are not getting invoked. 由于未调用firstNumSliderChange和secondNumSliderChange函数，因此未计算加法，减法和除法。 You can trigger them on onchange event 您可以在onchange事件中触发它们
background of the slider is not getting updated when you set the input.value. 设置input.value时，滑块的背景没有更新。 This is because, oninput event will not be triggered when you set the value programmatically. 这是因为，以编程方式设置该值时，不会触发oninput事件。 You can get the desired outcome by triggering the applyFill on amountInput input event. 您可以通过在amountInput input事件上触发applyFill来获得所需的结果。 as below 如下

 // colors of sliders const settings = { fill: '#1abc9c', background: '#d7dcdf' } // Update the range value and applyFill function updateRangeValue(range, newVal) { range.value = newVal; applyFill(range); } // find all sliders const sliders = document.querySelectorAll('.range-slider'); // Iterate through that list of sliders Array.prototype.forEach.call(sliders, (slider) => { // Look inside slider for our input add an event listener slider.querySelector('input').addEventListener('input', (event) => { // 1. apply value to the span slider.querySelector('span').innerHTML = event.target.value; // 2. applyfill to the input applyFill(event.target); }); // Don't wait for the listener, apply it now. applyFill(slider.querySelector('input')); }); // This function applies the fill to the sliders function applyFill(slider) { // turn value into a percentage to figure out how far it is in between the min and max of our input const percentage = 100 * (slider.value - slider.min) / (slider.max - slider.min); // create a linear gradient that separates at the above point // background color will change here const bg = `linear-gradient(90deg, ${settings.fill} ${percentage}%, ${settings.background} ${percentage+0.1}%)`; slider.style.background = bg; } // Store input as vars and do math. function updateValue() { var firstNum = document.querySelector('input[name=amountInput1]').value; var secondNum = document.querySelector('input[name=amountInput2]').value; var addition = firstNum + secondNum; var subtraction = firstNum - secondNum; var division = firstNum / secondNum; document.querySelector('.addition').innerHTML = addition; document.querySelector('.subtraction').innerHTML = subtraction; document.querySelector('.division').innerHTML = division; } function firstNumSliderChange(val) { document.querySelector('.output').innerHTML = val; updateValue(); } function secondNumSliderChange(val) { document.querySelector('.output-two').innerHTML = val; updateValue(); }

 h5 { margin: 0; padding: 0; } .range-slider__range { -webkit-appearance: none; height: 10px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; width: 250px; } .final-outputs { display: flex; align-items: center; width: 400px; justify-content: space-between; background: #eee; padding: 1rem; } .addition, .subtraction, .division { display: flex; justify-content: center; margin-top: .1rem; }

 <body> <form> <div class="range-slider"> <input class="range-slider__range" type="range" name="amountRange" min="0" max="1000" value="0" oninput="this.form.amountInput1.value=this.value" onchange="firstNumSliderChange()" /> <input class="output" type="number" name="amountInput1" min="0" max="1000" value="0" oninput="updateRangeValue(this.form.amountRange, this.value)" /> <span class="range-slider__value">0</span> </div> </form> <form> <div class="range-slider"> <input class="range-slider__range" type="range" name="amountRange" min="0" max="1000" value="0" oninput="this.form.amountInput2.value=this.value" onchange="secondNumSliderChange()" /> <input class="output-two" type="number" name="amountInput2" min="0" max="1000" value="0" oninput="updateRangeValue(this.form.amountRange, this.value)" /> <span class="range-slider__value">0</span> </div> </form> <div class="final-outputs"> <div class="final-output final-output--add"> <h5>addition</h5><span class="addition">1</span></div> <div class="final-output final-output--sub"> <h5>subtraction</h5><span class="subtraction">2</span></div> <div class="final-output final-output--div"> <h5>division</h5><span class="division">3</span></div> </div> </body>

输入滑块，输入时带有动态计算

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-27 10:44:34

输入滑块，输入时带有动态计算

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-27 10:44:34

解决方案1
1 已采纳 2019-08-27 10:44:34