Simple JavaScript- Confusing me...

**Jaryth000** · 03-28-2008, 09:24 PM

So, I have a few issues... however, Im trying to learn more about Javascript (right now using http://www.w3schools.com/js/ as my main learning tool), and if and when I breakdown completely and give up, Ill ask for help on my main problem... Im still going to attempt to solve that on my own.

For now however, I want some... much more basic help.

Ok, so here is a simple script, most of it was just an example that can be found http://www.w3schools.com/htmldom/prop_text_value.asp here. Iv modified it a bit to be more smiler to the larger issue I was talking about earlier. Everything was working fine, and all was good... until I ran into an error I just can not figure out... So, here is the modified code:

HTML Code:

<html>
<head>
<script type="text/javascript">
function alertValue()
  {
  alert(document.getElementById("text1").value)
  };
function lower()
  {
  document.getElementById("text1").value = document.getElementById("text1").value-25;
  };
  function higher()
  {
  document.getElementById("text1").value = document.getElementById("text1").value+25;
  };
</script>
</head>
<body>
<form>
<input type="text" id="text1" value="100" />
<input type="button" id="button1" onclick="alertValue()" 
value="Show value" /><br />
<input type="button" id="button2" onclick="lower()" 
value="Lower" /><br />
<input type="button" id="button3" onclick="higher()" 
value="Higher" /><br />
</form>
</body>
</html>

So the page Loads... it shows the Input box with the default value of 100... If you click on the "Show value" button... it comes up with an alert showing the current value. If you click the Lower button, it subtracts 25 from the value in the Input box, and updates it with the new value. Just like it is suppose to.
However, clicking the Higher button, adds "25" to the value....
So,

100 Lower = 75 Lower = 50 Higher = 5025 Higher = 502525 Lower = 502500

<_< yeah... not what I want... I mean, Im am by FAR no expert on JavaScript... but... I would think add and subtract would at least work the same way...
(Iv also tried * and /, but they work fine...)
So... whats going on? I mean... its a simple code.... and I dont see any errors... so what did I do wrong?

Wile Im asking for help... one other random question:
Can a Function call another Function call upon another Function?

**JeremyMiller** · 03-29-2008, 02:32 AM

Try this:

HTML Code:

<html>
<head>
<script type="text/javascript">
function alertValue()
  {
  alert(document.getElementById("text1").value)
  };
function lower()
  {
  document.getElementById("text1").value = parseInt(document.getElementById("text1").value)-25;
  };
  function higher()
  {
  document.getElementById("text1").value = parseInt(document.getElementById("text1").value)+25;
  };
</script>
</head>
<body>
<form>
<input type="text" id="text1" value="100" />
<input type="button" id="button1" onclick="alertValue()"
value="Show value" /><br />
<input type="button" id="button2" onclick="lower()"
value="Lower" /><br />
<input type="button" id="button3" onclick="higher()"
value="Higher" /><br />
</form>
</body>
</html>

The issue is that "+" operator. A "+" can indicate putting 2 strings together or adding. Since the .value attribute was a string, it was putting them together as strings instead of numbers. By adding the parseInt() function, you ensure that you are working with numbers and not text.

A function can call other functions:

HTML Code:

<script>
function yo() {
  return "Yo";
}
function yoyo() {
  return yo() + yo();
}
</script>

**Jaryth000** · 08:21 AM

^_^ Thank you!

yey I did it! With the help I got here I was able to figure out how to do all the rest of it myself. Thank you again!