1

What I am trying to do is make an EV Track for Pokemon, you do not need to know what that is. Basically I want to add, for example, 3 into the attack input box, and 2 into defense and click submit, then 3 should appear in the grid under attack, and 2 under defense. Then if I put 1 in the attack input box, it should add 1 to the display in the grid.

But right now, instead of adding the numbers like numbers, it treats them as strings, and only adds them to the attack display.

Here is my code http://pastebin.com/xy8232nG

Sorry if I do something wrong related ot the format of my question, just let me know, I'll fix it

So I added that parseint thing, and it works fine until I change the number or add 2 to attack and 2 to hp or something like that, it gives me "NaN" instead of a number

edit: so only the attack and special attack displays work, and if i input a value into any other stat, the special attack and attack values change to "NaN"

2
  • Use the parseInt function to convert strings to numbers Commented May 24, 2014 at 22:26
  • Please add relevant code to your post: don't dump it on some website. You don't need all of it, just the parts that concern your question. With HTML/CSS/JS questions, it sometimes helps to add a JSFiddle with all of your code so that we can see how your problem fits within the context of your code and mess with it without having to copy and paste it into our own editors. If your question involves design, it also sometimes helps to add a picture so that we can get a feel for what you're trying to accomplish. Commented May 24, 2014 at 22:29

2 Answers 2

2

First off, you wrote defD as defF in your code by accident.

But more importantly, you are mixing strings and numbers. In Javascript, innerHTML returns a string. A string can be any piece of text, like "I am a jelly donut". It returns a string because innerHTML is capable of carrying more than numbers - it could contain text too. So innerHTML returns a string, just to be safe.

As such, you are trying to add a number to a string (piece of text) and you can't add a number to a sentence. So Javascript decides to treat the number like another piece of text rather than a number, and simply tacks the second number on the end of the first one rather than doing a mathematical equation.

Now many others have been saying "use parseInt, use parseInt!" and normally, that would work. That is because parseInt is a function that takes strings and converts them to numbers. However, when you start out, some of your textboxes are empty, so parseInt does not know what to do. So you get NaN (or, "Not a Number" to be exact) because the box is blank.

Usually, I avoid using parseInt because it is a function and in general, using plain math works faster and better than using a function in JS. An easy workaround to your problem is to to multiply the strings by one. Now, I know what you're thinking. "But if adding a number to text doesn't work, why does multiplying?" Simple. You cannot multiply text. As such, Javascript is forced to think of it like two numbers, rather than two strings.

    atk += document.getElementById('atk').value*1;
    spa += document.getElementById('spa').value*1;
    def += document.getElementById('def').value*1;
    spd += document.getElementById('spd').value*1;
    hp += document.getElementById('hp').value*1;
    spe += document.getElementById('spe').value*1;
    document.getElementById("atkD").innerHTML = atk;
    document.getElementById("spaD").innerHTML = spa;
    document.getElementById("defD").innerHTML = def;
    document.getElementById("spdD").innerHTML = spd;
    document.getElementById("hpD").innerHTML = hp;
    document.getElementById("speD").innerHTML = spe;

An added bonus is that this won't return NaN like parseInt does. Try it in your code and see.

(Note: you might want to use a for loop to loop through those and shorten your code instead. It isn't really necessary, but it would look nicer in your code.)

Sign up to request clarification or add additional context in comments.

Comments

1

Use the parseInt function to make the values integers. Example:

.....
atk += parseInt(document.getElementById('atk').value);
.....

1 Comment

That fixed part of the probelm, but so only the attack and special attack displays work, and if i input a value into any other stat, the special attack and attack values change to "NaN"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.