Using an if statement inside of a for loop

Question

I have a form with two sets of radio buttons. I am trying to make it so that when a certain value is checked, a <p> element (with the Id descript) will update with the corresponding data.

Here is what I have, it isn't updating the element at all right now.

DEMO

function classStats() {
  classes = ['archer', 'mage', 'warrior'];
  classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5'];
  classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.'];
  for (i = 0; i < 3; i++) {
    c = classes[i];
    e = classStats[i];
    f = classAdd[i];
    if ($('input[name=class]:checked').val() === c) {
      $('#descript').text(e + ' ' + f);
    }
  }
}
classStats();

Corrected it in my demo https://jsfiddle.net/sq5hntpv/2/ should be i<3 — Shniper, Apr 27 '16 at 03:58
@Shniper - Please use the "edit" button to correct the code in your question. — jfriend00, Apr 27 '16 at 03:59
Also, the function classStats runs only once when, at the beginning, the value isn't set. You have to listen to the on change event of the inputs and run the code when something change. — Hugo Dozois, Apr 27 '16 at 04:01
can you please edit the jsfiddle? because this line $('input[name=class]:checked').val() === c but you have not as singed any value to the input[name=class]. So I think this will not work — brk, Apr 27 '16 at 04:07

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

There are multiple problem in your code :-

1.You are not listening radiobutton change event.

2.There is no need of looping.

Below is the modified and optimized version of your code.

var classes = ['archer', 'mage', 'warrior'];
var classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5'];
var classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.'];
var c,e,f;

$('input[name=class]').change(function(){
    c = classes.indexOf($(this).val());
    e = classStats[c];
    f = classAdd[c];
    $('#descript').text(e + ' ' + f);
});

DEMO

score -1 · Answer 2 · edited May 23 '17 at 10:28

Add the onchange events for your radio buttons on document ready. And call your code when the event is fired.

$('input[name=class]').change(function () {
     classes = ['archer', 'mage', 'warrior'];
     classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5'];
     classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.'];
     for (i = 0; i < 3; i++) {
        c = classes[i];
        e = classStats[i];
        f = classAdd[i];
        if ($('input[name=class]:checked').val() === c) {
          $('#descript').text(e + ' ' + f);
        }
     }
});

Look at How to use radio on change event? for details on how to add events for radio buttons.

Using an if statement inside of a for loop

2 Answers2