CODEWITHSUNDEEP
javascripthtml
user1836262
user1836262

Reputation: 143

JavaScript - Taking Input and displaying it to HTML element, as an integer

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"

Upvotes: 1

Views: 149

Answers (2)

tomysshadow
tomysshadow

Reputation: 952

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.)

Upvotes: 2

Xweque
Xweque

Reputation: 643

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

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

Upvotes: 1

Related Questions