总结forEach函数中的输入值

Question

我试图添加范围输入值，但由于我不知道它在我更改下一个输入值时从0开始。我可以在forEach函数中调用函数吗？任何帮助将不胜感激。

<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">
<input class="time-range" type="range" min="0" max="1440" value="0" step="15">

var d=document,
    range  = d.querySelectorAll(".time-range"),
    time_total_hrs = d.querySelectorAll(".time_total .hours"),
    time_total_min = d.querySelectorAll(".time_total .minutes"),
    timeMax  = 1440,
    timeInput = 0,
    timeLeft,num,hours,rhours,minutes,rminutes,current;

function getCurrent(){
  if (defined(slide)){
    return current = d.querySelector(".slide.active");
  }
}

getCurrent()

function timeConvert(num) {
  hours = (num / 60);
  rhours = Math.floor(hours);
  minutes = (hours - rhours) * 60;
  rminutes = Math.round(minutes);
  return num + " min = " + rhours + " h and " + rminutes + " min.";
}

function updateTotalTime(){
  var tot = 0;
  for (i = 0; i < range.length; i++){
    tot = tot + parseInt(range[i].value, 10);
  }
  console.log("total time is: "+tot+"");
  return tot;
}

function updateTimeLeft(){
  timeLeft = parseInt(timeMax) - parseInt(updateTotalTime());
  timeConvert(timeLeft);

  console.log("time left:"+timeLeft+"")

  for (i = 0; i < time_total_hrs.length; i++){
    time_total_hrs[i].innerHTML = rhours;
    time_total_min[i].innerHTML = rminutes;
  }
}

function updateTimeSelected(){
  timeConvert(timeInput);
  current.querySelector(".time_current .hours").innerHTML = rhours;
  current.querySelector(".time_current .minutes").innerHTML = rminutes;
}

function setWarning(){
  for (i = 0; i < time_total.length; i++){
    time_total[i].classList.add("warning");
  }
}

function removeWarning(){
  for (i = 0; i < time_total.length; i++){
    time_total[i].classList.remove("warning");
  }
}

[].forEach.call(range, function(el, i, els) {
  el.addEventListener('input', function() {

    timeInput = this.value;
    updateTotalTime();
    updateTimeLeft();
    updateTimeSelected();

    [].forEach.call(els, function(el) {

      if (el !== this) {
        el.setAttribute("max", timeLeft);
        if (timeLeft === 0){
          el.style.opacity = "0.5";
          el.setAttribute("disabled", "true");
          setWarning()
        } else if (timeLeft > 0){
          el.removeAttribute("disabled");
          removeWarning()
        } else {

        }
      } else {

      }

    }, this);

  });
});

Answer 1

弄清楚你想要做什么以及什么不适合你是很棘手的。我想知道是否最好停止思考“循环所有事物”并开始思考“我有一些范围，让我们将这些值加在一起。”

var ranges = Array.prototype.slice.call(document.querySelectorAll(".time-range"));
// ...
var total = ranges.reduce(function (subTotal, input) {
    return subTotal + parseInt(input.value, 10);
}, 0);

然后你会有总分钟数，你可以随心所欲地做任何事情。

var ranges = Array.prototype.slice.call(document.querySelectorAll(".time-range"));
var hoursElement = document.querySelector(".time_total .hours");
var minutesElement = document.querySelector(".time_total .minutes");

function minsToHoursMins(raw) {

    var hours = Math.floor(raw / 60);
    var minutes = raw - (hours * 60);

    return [hours, minutes];

}

document.querySelector(".time-range-holder").addEventListener("input", function () {

    var total = ranges.reduce(function (subTotal, input) {
        return subTotal + parseInt(input.value, 10);
    }, 0);
    var timeParts = minsToHoursMins(total);

    hoursElement.innerHTML = timeParts[0];
    minutesElement.innerHTML = timeParts[1];

});

<div class="time-range-holder">
  <input class="time-range" type="range" min="0" max="1440" value="0" step="15">
  <input class="time-range" type="range" min="0" max="1440" value="0" step="15">
  <input class="time-range" type="range" min="0" max="1440" value="0" step="15">
</div>

<div class="time_total">
  <p>Hours: <span class="hours"></span></p>
  <p>Minutes: <span class="minutes"></span></p>
</div>

Answer 2

let inputs = [...document.querySelectorAll('input')]
let button = document.querySelector('button')
const SUM = () => inputs.reduce((prev, { value }) => +prev + +value, 0)

button.addEventListener('click', () => console.log(SUM()))

<input value="1"/>
<input value="1"/>
<input value="1"/>

<button>SUM</button>