For Loop and innerText

KaiserClaw · #1 (**permalink**) 09-17-09, 04:09 AM

Hi,

I have some problem with my loop and innerText.

I have three input-fields. When you write a number I want the innerText-function to write the number, and when you add another number I want it to add those.
It suppose to display the number added and when another is added it will add them and so on.

Example:

If I write "3" in answer1 the innerText is supposed to display: 3
If I write "3" in answer1 and "5" in answer2 the innerText is supposed to displays: 8
and so on.....

The problem is that when I add a number in answer1 it just says "NaN" but when I fill answer1, answer2 and answer3 it says the correct sum.

My code:

Code:

function onLoad(){

for(i=0; i<3; i++){
document.getElementById("answer"+[i]).onkeyup=function(){ count();
}
}
function count(){

for(i=0; i<3; i++){

sum+=parseFloat(document.getElementById("answer"+[i]).value); 

document.getElementById("SUM").innerText =+sum;
}

}

It's very important to keep the loops! I can't use another script without the loops!

Thanks'

KaiserClaw · #2 (**permalink**) 09-17-09, 06:24 AM

I tried this function, but it doesn't work 100%. It displays all numbers, but it wont add them together...

Code:

function count()
{
  document.getElementById("SUM").innerText = "";

  for (i=0; i<=4; i++) {
  	var bo;
  	bo=(document.getElementById("answer"+[i]).value);
    document.getElementById("MESS").innerText +=(bo);
  }
}

wirehopper · #3 (**permalink**) 09-17-09, 06:58 AM

Code:

function count()
{
  document.getElementById("SUM").innerText = "";
total=0;
  for (i=0; i<=4; i++) {
  	var bo;
  	bo=(document.getElementById("answer"+[i]).value);
                     total+=bo;
    }
    document.getElementById("MESS").innerText =total;
}

KaiserClaw · #4 (**permalink**) 09-17-09, 09:32 AM

Prints: 0123 when I put "1" in answer1, "2" in answer2 and "3" in answer3

Suppose to print: "6" by adding 1+2+3

carters-site · #5 (**permalink**) 09-17-09, 10:20 AM

Took WireHopper's code and added parseInt method.

Code:

function count()
{
  document.getElementById("SUM").innerText = "";
total=0;
  for (i=0; i<=4; i++) {
  	var bo;
  	bo=(document.getElementById("answer"+[i]).value);
                     total+=parseInt(bo);
    }
    document.getElementById("MESS").innerText =total;
}

End User · #6 (**permalink**) 09-17-09, 11:18 AM

Quote:

Originally Posted by carters-site

Took WireHopper's code and added parseInt method.

Yep, Javascript is the only language I know where "2 + 2" equals "22".

C, C++, perl, PHP, java, Forth, BASIC, COBOL, LISP, etc etc....all those will give you "4". But not Javascript, noooooo. That'd be too easy.

I don't know what they were smoking when they decided on string concatenation as the default behavior for "+", but it must have been some really, really strong stuff.

carters-site · #7 (**permalink**) 09-17-09, 12:04 PM

Quote:

Originally Posted by End User

Yep, Javascript is the only language I know where "2 + 2" equals "22".

C, C++, perl, PHP, java, Forth, BASIC, COBOL, LISP, etc etc....all those will give you "4". But not Javascript, noooooo. That'd be too easy.

I don't know what they were smoking when they decided on string concatenation as the default behavior for "+", but it must have been some really, really strong stuff.

LOL! Yes one of the many annoyances of javascript. The other is debugging in IE... / wrist

hscriptnew · #8 (**permalink**) 10-13-09, 08:27 AM

Hai I have to use an for loop inner text some problem occur repeated to check an one statement executed
for (i=0; i<=4; i++) {
var bo;
bo=(document.getElementById("answer"+[i]).value);
total+=parseInt(bo);

}

job0107 · #9 (**permalink**) 10-16-09, 12:31 AM

I am not exactly sure how you have your HTML setup,
so I setup a form with 5 input elements.
1 - has id="answer0"
2 - has id="answer1"
3 - has id="answer2"
4 - has id="SUM"
5 - is a submit button

The first thing that happens is the window.onload event,
which runs a function that attaches the onkeyup event listener to all input elements that have the word "answer" in their id,
and assigns the function count() to the event listener.

The function count() gets the values from all three input elements and adds them together,
then places the results into the input element with id "SUM".

HTML Code:

<html>
<head>
<script>
window.onload = function()
{
 var objs = document.getElementsByTagName("input");
 for(var i=0;i<objs.length;i++)
 {
  if(objs[i].id.substr(0,objs[i].id.length-1) == "answer")
  {
   objs[i].onkeyup=count;
   }
  }
 }
function count()
{
 var objs = document.getElementsByTagName("input");
 var total = 0;
 for(var i=0;i<objs.length;i++)
 {
  if(objs[i].id.substr(0,objs[i].id.length-1) == "answer")
  {
   total += objs[i].value ? parseInt(objs[i].value) : 0;
   }
  }
 document.getElementById("SUM").value = total;
 }
</script>
</head>
<body>
<form action="processForm.php" method="post">
 <table>
  <tr>
   <td>Value 1: </td>
   <td><input type="text" id="answer0" /></td>
  </tr>
  <tr>
   <td>Value 2: </td>
   <td><input type="text" id="answer1" /></td>
  </tr>
  <tr>
   <td>Value 3: </td>
   <td><input type="text" id="answer2" /></td>
  </tr>
  <tr>
   <td align="right">Total: </td>
   <td><input type="text" id="SUM" /></td>
  </tr>
  <tr>
   <td colspan="2" align="right"><input type="submit" name="submit" value="Submit" /></td>
  </tr>
 </table>
</form>
</body>
<html>

You shouldn't have any problems modifying this code to fit your HTML.