Как упростить переменные JS и получить `<input>` s по классу, а затем суммировать их значения?

Question

Если у меня много таких <input>, как это:

<input class="BUBU-1">
<input class="BUBU-2">
...
<input class="BUBU-1000">

как мне сделать переменные, подобные этим:

var NEW1 = document.get...(" BUBU-1 ");
// ...
var NEW1000 = document.get...(" BUBU-1000 ");

но вместо этого что-то вроде этого (если это возможно):

var SMTH = 1..1000;
var NEW[SMTH] = document.get...(" BUBU-[SMTH] ");

А затем сложите их, как NEW1 + NEW2 + ... + NEW1000, но с некоторой функцией, которая говорит: «возьмите все NEW[SMTH] и сложите их» .

Answer 1

1. Поместите все входные элементы в NodeList с помощью document.querySelectorAll('[class^=BUBU-]'); и сделайте этот массив с помощью оператора деструктуризации массива ... (NodeList - это массивоподобная структура, поэтому его можно легко преобразовать в массив, который позволяет используйте методы, доступные для массивов, см. шаг 2). ([class^=BUBU-] соответствует всем элементам, которые имеют атрибут class, начинающийся с BUBU-).

2. Используйте Array.prototype.reduce() для накопления значений. Помните, что значения всегда являются строками на входах, поэтому преобразуйте их в Number перед добавлением.

const inputs = [...document.querySelectorAll('[class^=BUBU-]')]

function sum(collection) {
  return collection.reduce((acc,val) => { return acc+Number(val.value) }, 0)
}

console.log(sum(inputs));

<input class="BUBU-1" value="1">
<input class="BUBU-2" value="2">
...
<input class="BUBU-1000" value="1000">

Видя, что в вашем JSFiddle вы используете id вместо class, просто установите селектор в document.querySelectorAll('[id^=BUBU-]') `.

Answer 2

Вы можете просто получить один элемент, подобный этому:

let n = 1;

document.querySelector(".BUBU-" + n); // This yields `<input class="BUBU-1">`.

Вы можете взять сумму их значений, сначала создав массив чисел, сопоставляя их с числовыми значениями их входов их селекторов, затем reduce их на сумму:

const sum = Array.from({
    length: 1000
  }, (_, index) => Number(document.querySelector(".BUBU-" + (index + 1)).value))
    .reduce((result, value) => result + value, 0);

console.log(sum);

Если вы хотите удалить пустые или нечисловые поля перед вычислением суммы, используйте .filter((value) => !isNaN(value)) перед строкой .reduce; это фильтры NaN значения .

Если вы хотите просто массив числовых значений, удалите шаг reduce. Если вы хотите, чтобы значения представляли собой строки, а не числа, удалите вызов Number. Если вам нужны только элементы, а не их значения, используйте просто document.querySelector(".BUBU-" + (index + 1)).

---

Если все <input> являются дочерними элементами родительского элемента , например, <div id="allInputs">, их выбор и суммирование становится проще:

const sum = Array.from(document.querySelector("#allInputs input"), ({value}) => Number(value))
  .reduce((result, value) => result + value, 0);

console.log(sum);

---

Если ваши <input> должны содержать только цифры, рассмотрите возможность присвоения им атрибута type="number". Затем вы также можете использовать что-то вроде Array.from(document.querySelector("#allInputs input"), ({valueAsNumber: number}) => number) и т. Д.

---

Увидев JSFiddle , убедитесь, что ваши селекторы верны. .BUBU-1 выбирает элементы с помощью class="BUBU-1", #BUBU-1 выбирает (первый) элемент с помощью id="BUBU-1".

Если вы хотите прослушать change события, рассмотрите возможность использования делегирования событий:

В ванильном JavaScript:

document.body.addEventListener("change", function(e){
  if(e.target.matches("input")){
    // Calculate sum, etc.
  }
});

В jQuery:

$("body").on("change", "input", function(e){
  // Calculate sum, etc.
});

Поскольку ваш JSFiddle кажется более сложным, чем ваш вопрос, но вы только что спросили о суммировании полей ввода с именами классов общего шаблона, если у вас есть вопрос о более сложной проблеме , подумайте задаю новый вопрос.