Как объеденить 2 цикла в 1 в приведенном коде и это возможно?

Question

[Mr_Sergo]

Здравствуйте, форумчане!
Подскажите как и возможно ли в данной ситуации сделать 1 цикл вместо 2? Или это нормальная ситуация?:

function calc(){
	var select = document.querySelectorAll('.calc>select');
	for (i = 0; i < select.length; i++){
		select[i].onchange = function(){
			var a=1;
			for (l = 0; l < select.length; l++){
				a*=Number(select[l].value);
			}
			document.getElementById('result').innerHTML = a+'р.';
		}
	}
}

Вот посмотрите:
https://jsfiddle.net/zlojnaxa/70pxqcLd/7/

Comments

[Виталий]

А зачем тут вообще циклы, взял два результата перемножил в онклик

[Mr_Sergo]

Виталий, да можно было и по id сделать- еще проще, меня интересует:
Как объеденить 2 цикла в 1 в приведенном коде и это возможно?

Answer 1

[lmilligan]

Написать можно, например так:

function calc(){
  var select = document.querySelectorAll('.calc>select');
  let values = []
  let result = 1
  for (i = 0; i < select.length; i++){
    values.push(+select[i].value)
    result *= +select[i].value
    select[i].setAttribute('data-index', i)
  
    select[i].onchange = function(e){
      const index = e.target.getAttribute('data-index')
      result = result / +values[index] * +e.target.value
      values[index] = +e.target.value

      document.getElementById('result').innerHTML = result+'р.';
    }
  }
}

Но я бы не стал.

Comments

[Mr_Sergo]

Но я бы не стал.

Объясните пожалуйста почему?

[lmilligan]

zlojnaxa, 1) Кода стало больше. 2) Код стал менее очевидным. 3) Поставленную задачу можно решить проще.