Как суммировать значения из getElementById и getElementsByClassName?

Question

[ImSoSorry]

Есть поля

<input type="text" name="a" id="input" value="">

<input type="hidden" class="b" value="5">
<p class="result"></p> //должно быть 10 если id="input" равен 2

<input type="hidden" class="b" value="25">
<p class="result"></p> //должно быть 50 если id="input" равен 2

<input type="hidden" class="b" value="55">
<p class="result"></p> //должно быть 110 если id="input" равен 2

Суть действия проста, нужно вводить в input с именем "a" и складывать с input`ом c классом "b" после чего выводить результат в

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

function purchase(){
  var b= document.getElementsByClassName('b');
    var index;
    for (var index = 0; index < b.length; index++) {
      
    }


  var input = document.getElementById("a").value;
  
  if (id.length > 0) {
    alert (id[0].value);
}
  
  var x = document.getElementsByClassName("result");

  var i;
  for (i = 0; i < x.length; i++) {
    x[i].innerHTML = input; //сдесь должно быть по идеи  input*b[index].value?
  }
  


}

Comments

[nandeaitsurawapinku]

по моему вы перепутали name и id судя по описанию

Answer 1

[Андрей]

Во-первых, для выкладывания кода можно пользоваться такими сервисами, как jsfiddle.net
Во-вторых, если вы точно значете что у вас только каждого элемента только по одному экземпляру, то не обязательно проходить циклом по ним.
В-третьих, чтобы ваши цифры были цифрами с точки зрения javascript, нужно конвертировать их в цифры (например, parseFloat)
И тогда всё получится. Вот рабочий пример (последние две строчки - чтобы функция срабатывала при вводе текста)

update: решение для нескольких выводимых элементов

Comments

[ImSoSorry]

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

[Андрей]

ImSoSorry, добавил в ответ решение для нескольких элементов

Answer 2

[nandeaitsurawapinku]

<input type="text" id="a" value="">

<input type="hidden" class="b" value="5">

<p class="result"></p>

var a = document.querySelector('#a')
var b = document.querySelector('.b')

var result = document.querySelector('.result')

a.addEventListener('input', function() {
	if (a.value) {
  	result.innerHTML = parseInt(a.value) + parseInt(b.value)
	}
})

Answer 3

[Дмитрий Тарасов]

document.addEventListener("DOMContentLoaded", function(event) {
  var input1 = document.querySelector("#a");
  var input2 = document.querySelector(".b");
  
  input1.addEventListener("input", function(e) {
  document.querySelector(".result").innerHTML = "";
  if(parseFloat(input1.value)) {
      document.querySelector(".result").innerHTML = parseFloat(input1.value) + parseFloat(input2.value);
  }
  });                         
});