CODEWITHSUNDEEP
javascriptif-statement
ClaytonAlanKinder
ClaytonAlanKinder

Reputation: 335

Stuck on an If Statement in Javascript

I'm pretty new to programming, so I apologize in advance if this turns out to be very easy to solve.

To increase my skills, I've been designing small JS-based websites and then moving on to another, more complex website after I've completed the one before it.

I'm currently working on a website that helps you plan a character in a certain video game (Dark Souls II, in case anyone is wondering). This website has a dropdown menu where you can select from one of eight starting classes. After choosing one, the website updates to show that particular class' stats.

In addition to showing each class' starting stats, there's also a section that allows you to increase or decrease a stat in order to plan out your character in advance. This is where I've run into my problem.

The increase function that I'm using works fine, but I'm having problems with the function to decrease a stat. Ideally, I want it to decrease a stat BUT not beyond what the starting point for that stat is. It works fine until I try to decrease a stat that STARTED below 10 back down beneath 10.

For example, the Warrior class starts with 7 Vigor. I can increase it up to 9, and then decrease it back down to 7. However, when I increase it to 10 and then try the decrease button, nothing works. However, on classes that have a starting Vigor of a number greater than 10, I can increase and decrease with no problems at all. The code I'm using as is follows:

function decreaseVigor() {
  for (i = 0; i < classStats.length; i++) {
    if (chosenClass == classStats[i][0]) {
      if (vigor.innerHTML > startingVigor.innerHTML) {
        soulLevel.innerHTML = classStats[i][1] -= 1;
        vigor.innerHTML = classStats[i][2] -= 1;
      }
    }
  }
}

I know the problem lies within the second If statement, but I don't know why it's not working. The startingVigor for a Warrior class is 7, so why won't it let me decrease Vigor once I increase it to 10 or higher?

In case it helps, here are the stats for all the classes:

classStats = [

["warrior", 12, 7, 6, 6, 5, 15, 11, 5, 5, 5],
["knight", 13, 12, 6, 7, 4, 11, 8, 9, 3, 6],
["swordsman", 12, 4, 8, 4, 6, 9, 16, 6, 7, 5],
["bandit", 11, 9, 7, 11, 2, 9, 14, 3, 1, 8],
["cleric", 14, 10, 3, 8, 10, 11, 5, 4, 4, 12],
["sorcerer", 11, 5, 6, 5, 12, 3, 7, 8, 14, 4],
["explorer", 10, 7, 6, 9, 7, 6, 6, 12, 5, 5],
["deprived", 1, 6, 6, 6, 6, 6, 6, 6, 6, 6]

];

They go in order of: SoulLevel (or total level), Vigor, Endurance, Vitality, Attunement, Strength, Dexterity, Adaptability, Intelligence, Faith.

If I select the Knight class, I'll be able to freely increase or decrease because its startingVigor is 12. I want to know why it doesn't work when I increase a number below 10 to 10 or greater.

Thank you for any help you can offer!

Upvotes: 0

Views: 192

Answers (2)

MikeVelazco
MikeVelazco

Reputation: 905

I guess that is making a validation as as string. Try parseInt() or parseFloat().

its somethig like:

parseInt(vigor.innerHTML, 10); /* or maybe */ parseFloat(vigor.innerHTML, 10)

when you load the value.innerHTML you get a string and you need to convert it to a number.

Upvotes: 0

epascarello
epascarello

Reputation: 207527

You are comparing strings, not numbers

vigor.innerHTML > startingVigor.innerHTML

You can see it in the console:

> "7" > "8"
false
> "7" > "10"
true
> 7 > 8
false
> 7 > 10
false

Use parseInt/parseFloat

parseInt(vigor.innerHTML,10) > parseInt(startingVigor.innerHTML,10)

Upvotes: 2

Related Questions