Question

我的代码有一些问题。我希望能够更改滑块并使用javascript动态计算和更新结果。我无法使其按预期工作。

问题：

当我更改滑块时，不会计算加法，减法和除法，并且不会更新元素。
当我通过inputs在type="number"中通过用户键盘输入手动更改滑块值时，滑块的背景和span的{{1}}元素未更新。当我移动滑块按钮时，它按预期工作。

最诚挚的问候，
坦白

class="range-slider__value"

// 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;
}

Answer 1

未计算加法，减法和除法，因为未调用firstNumSliderChange和secondNumSliderChange函数。您可以在onchange事件中触发它们
背景未更新。这是因为，以编程方式设置该值时，不会触发oninput事件。您可以通过在amountInput input上触发applyFill来获得所需的结果。如下

// 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 个答案: