Вычисления JS из одного списка узлов в другой

#javascript

Вопрос:

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

Я в основном хочу перебрать один список узлов, выполнить вычисления для этих элементов и поместить их в другой список узлов.

 <span id ="item1">20</span><span id = "item2">0</span>
<span id ="item1">15</span><span id = "item2">0</span>
<span id ="item1">10</span><span id = "item2">0</span>

Я хочу умножить пункт 1 на 1000 и поместить эту цифру в пункт 2.

 <span id ="item1">20</span><span id = "item2">20000</span>
<span id ="item1">15</span><span id = "item2">15000</span>
<span id ="item1">10</span><span id = "item2">10000</span>

Я ценю, что JS будет отображать приведенный выше код, но я надеюсь, что это немного прояснит то, что я хочу.

Я знаю, что мне нужно выбрать все с помощью querySelectAll:

 var items = document.querySelectorAll('#item1');

Мне удалось сделать это для одного элемента с помощью querySelector, но я думаю, что, возможно, откусил больше, чем могу прожевать с помощью списка узлов! Я знаю, что мне нужно перебирать эти данные с помощью цикла for или forEach, но у JS, похоже, довольно много различных методов для перебора данных, а фактор списка узлов добавляет дополнительный уровень сложности!

Заранее спасибо за вашу помощь/подсказки!

Редактировать:

Отвечая на комментарии ниже, чтобы html был не совсем таким, я просто подумал, что, возможно, было бы проще сделать это в html. На самом деле это приложение Flask, поэтому код находится в шаблоне Jinja2, в котором просматриваются элементы из базы данных.

 {% for x in y.items %}
...
<div class="card-footer"><span id ="item">{{ item.id }}</span><span id = "itemAnother"></span>*calculatedNumberHere*</div>
...
{% endfor %}

Редактировать:

 <div class="card-footer"><span class="item">{{ item.id }}</span><span class="itemAnother"></span>*calculatedNumberHere*</div>

Был обновлен код Jinja2, и ответ Дивакара в JS был использован дословно, и это сработало.

1. id атрибуты должны быть уникальными

2. Вы должны пересмотреть логику, несколько одинаковых идентификаторов-недопустимый HTML, вместо этого используйте классы.

3. Ваша структура HTML усложняет работу, помимо наличия одного и того же идентификатора для нескольких элементов. 1 — вам нужно будет извлечь только нужный текст из родительского элемента, не включая ничего из дочернего элемента, 2 — ваша структура «промежуток внутри промежутка» заставляет все отображаться как одно длинное число

4. ребята, спасибо за эти комментарии, мне явно предстоит еще немного поработать с моим html. Ответ Дивакара ниже был ответом, и я запустил это.

Ответ №1:

Вам нужно использовать class вместо id

 const items1List = document.querySelectorAll('.item1')
const items2List = document.querySelectorAll('.item2')
items1List.forEach((item, index)=>{
  const num = Number.parseInt(item.innerText)
  if(!Number.isNaN()){
  items2List[index].innerText = num * 1000
}
})

 <span class='item1'>10</span>
<span class='item2'></span>

<span class='item1'>12</span>
<span class='item2'></span>

<span class='item1'>32</span>
<span class='item2'></span>