issue with javascript condition

Question

I am fetching rank count from Html class and I want to show the result on base on rank count

there are 5 questions which have these 4 options

which have Html like below

var $ = jQuery;
var rank = 0;
 var i;
var x = $(".que").toArray();
var length = x.length+1;
for (i = 1; i < length; i++) {

  var rank_count = ($('.que' + i).find(".selected_answer").attr("class").split(/\s+/));
  //var rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));

  if (i == 5 && rank_count[1] == 'rank_1') {
    rank = parseInt(16);
    //console.log(rank);
  } else {
    rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_', ''));
    //
    console.log(rank);
  }

}
// if rank between 0-4 then show this
if (rank >= parseInt(0) && rank <= parseInt(4)) {
  $('.result').find(".blog1").css('display', 'flex');
}
// if rank between 5-8 then show this
if (rank >= parseInt(5) && rank <= parseInt(8)) {
  $('.result').find(".blog2").css('display', 'flex');
}
// if rank between 9-12 then show this
if (rank >= parseInt(9) && rank <= parseInt(12)) {
  $('.result').find(".blog3").css('display', 'flex');
}
// if rank between 13-16 then show this
if (rank >= parseInt(13) && rank <= parseInt(16)) {
  $('.result').find(".blog4").css('display', 'flex');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="que1 que">question1</p>
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>


<p class="que2 que">question2</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que3 que">question3</p>
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que4 que">question4</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que5 que">question5</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

in this, I have set condition if que5 has selected answer rank_1 then set rank 16 else rank count as per selected answer.

but when I set the selected answer as per

if (i == 5 && rank_count[1] == 'rank_1') 
    {
        rank = parseInt(16);
       console.log(rank);
    }else{
       rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));
       console.log(rank);
    }

it is not showing proper result or showing 2 result blog3 or blog4

I don't know why is this happen

can anybody help me with this

@connexo I have define var rank = 0; before for loop I am editing code — user12133523
– user12133523, Commented Feb 17, 2020 at 10:10
What is "i < length"?, length of what? and where is the length variable declared? — otejiri
– otejiri, Commented Feb 17, 2020 at 10:18
In the code provided, there are no items with class $(".que") so your loop never runs. — fdomn-m
– fdomn-m, Commented Feb 17, 2020 at 10:28

as-if-i-code · Accepted Answer · 2020-02-17 10:36:28Z

Changes are needed at three places.
1. define length variable as var length = $("p[class^='que']").length;
2. In HTML < p > tag should end after all span elements, only then $('.que' + i).find(".selected_answer") will be able to find span with .selected_answer class
3. condition inside for loop should include <= so that it reaches till 5

//var $ = jQuery;
var rank = 0;
var length = $("p[class^='que']").length;

for (i = 1; i <= length; i++) {

  var rank_count = ($('.que' + i).find(".selected_answer").attr("class").split(/\s+/));
  //var rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));
  
  if (i == 5 && rank_count[1] == 'rank_1') {
    rank = parseInt(16);
    
    //console.log(rank);
  } else {
    rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_', ''));
    //
    console.log(rank);
  }

}
alert(rank);
// if rank between 0-4 then show this
if (rank >= parseInt(0) && rank <= parseInt(4)) {
  $('.result').find(".blog1").css('display', 'flex');
}
// if rank between 5-8 then show this
if (rank >= parseInt(5) && rank <= parseInt(8)) {
  $('.result').find(".blog2").css('display', 'flex');
}
// if rank between 9-12 then show this
if (rank >= parseInt(9) && rank <= parseInt(12)) {
  $('.result').find(".blog3").css('display', 'flex');
}
// if rank between 13-16 then show this
if (rank >= parseInt(13) && rank <= parseInt(16)) {
  $('.result').find(".blog4").css('display', 'flex');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="que1">question1
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>

<p class="que2">question2
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que3">question3
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que4">question4
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que5">question5
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>

Collectives™ on Stack Overflow

issue with javascript condition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related