Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите пожалуйста вычислить общую сумму (https://javascript.ru/forum/misc/36632-pomogite-pozhalujjsta-vychislit-obshhuyu-summu.html)

katalizator 22.03.2013 13:21

Помогите пожалуйста вычислить общую сумму
 
Помогите пожалуйста. Есть вот такой вот код:

<form>
<table>

<tr>
<td><input type="text" id="xxx_1" onkeyup="document.getElementById(\'xxx_1_r\').innerHTML = (parseFloat(this.value)||0) * 50"></td>
<td id="xxx_1_r"></td>
</tr>

<tr>
<td><input type="text" id="xxx_2" onkeyup="document.getElementById(\'xxx_2_r\').innerHTML = (parseFloat(this.value)||0) * 70"></td>
<td id="xxx_2_r"></td>
</tr>

<tr>
<td><input type="text" id="xxx_3" onkeyup="document.getElementById(\'xxx_3_r\').innerHTML = (parseFloat(this.value)||0) * 90"></td>
<td id="xxx_3_r"></td>
</tr>

</table>
</form>


Таблица умножает вводимое значение в input на заранее заданное число.

Как можно суммировать все получаемые и выводимые значения и сразу их выводить под таблице? :(

Помогите пожалуйста...

katalizator 22.03.2013 13:33

пытался сделать как то так:

for (q = 1; q++) {   i=document.getElementById('xxx_r\').value; result=result+(i*chislo; }
document.write(result);


Но ни чего не вышло...
Необходимо сложить именно все xxx_1_r + xxx_2_r +xxx_3_r +...+ xxx_N_r

rgl 22.03.2013 14:03

1. Ваш пример не работает, и одна из причин - в HTML символы не маскируются обратным слэшом. Если вы внутри двойных кавычек используете одинарные, то маскировка вообще не нужна. Если же внутри двойных кавычек вдруг захотелось использовать опять же двойные, применяйте &quot; примерно так:
onkeyup="document.getElementById(&quot;xxx_1_r&quo t; ).innerHTML = (parseFloat(this.value)||0) * 50"
2. innerHTML в таблицах в младших IE только для чтения, писать нельзя.
3. document.write используется только в процессе закрузки документа. Когда документ уже полностью загружен, document.write приведет к переписыванию документа, т.е. старое содержимое будет заменено на новое

Ervin 22.03.2013 14:09

1) Надо убрать экранизацию с document.getElementById. Должно быть так,
- document.getElementById('xxx_N_r')
2) Вот простая функция, вызов которой делает то что тебе нужно.
function getResult() {
  var i = 1,
      el = document.getElementById("xxx_" + i + "_r"),
      result = 0;
  while(el) {
    result += +el.innerHTML;
    i++;
    el = document.getElementById("xxx_" + i + "_r");
  }
  
  alert(result);
}


Для того чтобы она вызывалась автоматический, нужно приписать ее к каждому событию onkeyup. Пример -
onkeyup="document.getElemenyById('xxx_1_r').innerHTML = (parseFloat(this.value)||0) * 50;getResult();"


Вроде то что нужно, можно сделать более эффективно, если изменить пару моментов.

katalizator 22.03.2013 14:11

Цитата:

Сообщение от rgl (Сообщение 242007)
1. Ваш пример не работает, и одна из причин - в HTML символы не маскируются обратным слэшом. Если вы внутри двойных кавычек используете одинарные, то маскировка вообще не нужна. Если же внутри двойных кавычек вдруг захотелось использовать опять же двойные, применяйте &quot; примерно так:
onkeyup="document.getElementById(&quot;xxx_1_r&quo t; ).innerHTML = (parseFloat(this.value)||0) * 50"

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

Цитата:

Сообщение от rgl (Сообщение 242007)
2. innerHTML в таблицах в младших IE только для чтения, писать нельзя.
3. document.write используется только в процессе закрузки документа. Когда документ уже полностью загружен, document.write приведет к переписыванию документа, т.е. старое содержимое будет заменено на новое

Или можеn подскажите пожалуйста как сложить значения в дивах:

<div id="num">10</div>
<div id="num">20</div>
<div id="num">30</div>
<div id="num">40</div>
<div id="num">50</div>
<div id="num">60</div>


Если получиться сделать это то задача думаю будет решена.
Буду очень Вам благодарен

Ervin 22.03.2013 14:15

Тоже самое с дивами, просто задать им id с их порядковым номером а потом заменить xxx в функции getResult на num. Пример -

<div id="num_1"></div>
<div id="num_2"></div>

// в функции getResult изменить id
el = document.getElementById("num_" + i);

rgl 22.03.2013 14:16

Цитата:

Сообщение от Ervin (Сообщение 242008)
можно сделать более эффективно, если изменить пару моментов.

var i = 1, el = document.getElementById("xxx_" + i + "_r"), :haha:
var i = 1, el = document.getElementById("xxx_1_r"),

katalizator 22.03.2013 14:40

Огромное спасибо за помощь!
Прошу прощения что туплю :(

Пытаюсь воспользоваться вашими советами но ни как...
Я JS второй раз в жизни сталкиваюсь.

Покажите пожалуйста полный готовый скрипт что бы вычислить сумму значений

<div id="num_1_1">10</div>
<div id="num_1_2">20</div>
<div id="num_2_1">50</div>
<div id="num_2_2">30</div>
<div id="num_2_3">25</div>
<div id="num_3_1">64</div>

Что бы в блоке

<div id="result"></div>

Высвечивалась сумма значений всех блоков.

Сегодня до 4х утра возился так и не разобрался :(

rgl 22.03.2013 15:15

<html>
<script type="text/javascript">
  function f() {
    var el, i = 0, result = 0;
    while( el = document.getElementById( "num_" + ++i ) )
      result += +el.textContent;
    document.getElementById( "result" ).innerHTML = "sum=" + result;
  }
</script>

<div id="num_1">10</div>
<div id="num_2">20</div>
<div id="num_3">50</div>
<div id="num_4">30</div>
<div id="num_5">25</div>
<div id="num_6">64</div>
<input type="button" value="calculate" onclick="f();">
<div id="result"></div>
</html>

Ervin 22.03.2013 15:24

function getResult() {
   var i = 1,
        b = 1,
        el = document.getElementById("num_" + i + "_" + b),
        result = 0;
        
    while(el) {
       while(el) {
          result += +el.innerHTML;
          b++;
          el = document.getElementById("num_" + i + "_" + b);
      }
          
      b = 1;
      i++;
      el = document.getElementById("num_" + i + "_" + b);
    }
			  
   document.getElementById("result").innerHTML = result;
}


Ред. - Код чтобы вызвать функцию
<div id="calculate"></div>

    window.onload = function() {
       document.getElementById("calculate").onclick = getResult;
    }

katalizator 22.03.2013 15:53

Цитата:

Сообщение от rgl (Сообщение 242023)
<html>
<script type="text/javascript">
  function f() {
    var el, i = 0, result = 0;
    while( el = document.getElementById( "num_" + ++i ) )
      result += +el.textContent;
    document.getElementById( "result" ).innerHTML = "sum=" + result;
  }
</script>

<div id="num_1">10</div>
<div id="num_2">20</div>
<div id="num_3">50</div>
<div id="num_4">30</div>
<div id="num_5">25</div>
<div id="num_6">64</div>
<input type="button" value="calculate" onclick="f();">
<div id="result"></div>
</html>


Цитата:

Сообщение от Ervin (Сообщение 242027)
function getResult() {
   var i = 1,
        b = 1,
        el = document.getElementById("num_" + i + "_" + b),
        result = 0;
        
    while(el) {
       while(el) {
          result += +el.innerHTML;
          b++;
          el = document.getElementById("num_" + i + "_" + b);
      }
          
      b = 1;
      i++;
      el = document.getElementById("num_" + i + "_" + b);
    }
			  
   document.getElementById("result").innerHTML = result;
}


Ред. - Код чтобы вызвать функцию
<div id="calculate"></div>

    window.onload = function() {
       document.getElementById("calculate").onclick = getResult;
    }



Огромнейшее Вам спасибо!!!!!! :thanks: :thanks: :thanks:

katalizator 22.03.2013 15:58

Цитата:

Сообщение от rgl (Сообщение 242023)
<html>
<script type="text/javascript">
  function f() {
    var el, i = 0, result = 0;
    while( el = document.getElementById( "num_" + ++i ) )
      result += +el.textContent;
    document.getElementById( "result" ).innerHTML = "sum=" + result;
  }
</script>

<div id="num_1">10</div>
<div id="num_2">20</div>
<div id="num_3">50</div>
<div id="num_4">30</div>
<div id="num_5">25</div>
<div id="num_6">64</div>
<input type="button" value="calculate" onclick="f();">
<div id="result"></div>
</html>

Не подскажите ещё пожалуйста, как сделать что бы результат выводился автоматически сразу, без нажатия кнопки?

Ervin 22.03.2013 16:00

Когда тебе нужно выводить ? При загрузки станице ?

katalizator 22.03.2013 16:06

Цитата:

Сообщение от Ervin (Сообщение 242038)
Когда тебе нужно выводить ? При загрузки станице ?

Нет, в процессе ввода.
Что бы считалось на лету

Ervin 22.03.2013 16:20

Тогда легче всего с использованием input вместо div:
<input type="text" id="num_1" class="calculate" value="" />
 <input type="text" id="num_2" class="calculate" value="" />
 <input type="text" id="num_3" class="calculate" value="" />
 
  // создать обработчики для каждого инпута
  var elements = document.getElementsByClassName("calculate");
  
  for(var i = 0, leng = elements.length; i < leng; i++) {
    elements[i].onkeyup = getResult;
  }


Вроде все.

katalizator 22.03.2013 16:26

Цитата:

Сообщение от Ervin (Сообщение 242045)
Тогда легче всего с использованием input вместо div:
<input type="text" id="num_1" class="calculate" value="" />
 <input type="text" id="num_2" class="calculate" value="" />
 <input type="text" id="num_3" class="calculate" value="" />
 
  // создать обработчики для каждого инпута
  var elements = document.getElementsByClassName("calculate");
  
  for(var i = 0, leng = elements.length; i < leng; i++) {
    elements[i].onkeyup = getResult;
  }


Вроде все.

Попробую так, спасибо большое :)


Часовой пояс GMT +3, время: 04:28.