Pascal Pascal - 6 months ago 14
jQuery Question

Checking if a selector is true does not work properly in javascript

I have several divs in HTML which contains different background images. If you click on a div, there is a selector, which will be set to true. For example, I have a div "jogging" and if I click on this, the background image change from black to orange and the selector jogging_selected will be set to true.

So far so good. Now I did a next button (#button_step3), which should set the display tag of this part to none but only, if one of the divs are selected.

It always goes to the "else-part" even if there is a selector which is true and I really don't get why.

UPDATE



I added console.log(jogging_selected); to the else part of the if query and he actually logs false. I really dont get why, because if I reclick the div, he changes back to black and he does this only if the selector is true.




Here is my javascript, CSS and HTML Code (I broke it down to the relevant parts):



$(document).ready(function() {

var jogging_selected = false;
var soccer_selected = false;
var tennis_selected = false;
var golf_selected = false;

function setBackgroundAndSelector(childnumber, imagepath_black, imagepath_orange, activity_selector){
if(activity_selector){
$(childnumber).css( "background", imagepath_black)
}
else{
$(".image_activitys:nth-child(1)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging)" );
$(".image_activitys:nth-child(2)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer)" );
$(".image_activitys:nth-child(3)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis)" );
$(".image_activitys:nth-child(4)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Golf)" );
jogging_selected = false;
soccer_selected = false;
tennis_selected = false;
golf_selected = false;
for(i=1; i<5; i++){
if('.image_activitys:nth-child('+i+')' == childnumber){
$(childnumber).css( 'background', imagepath_orange );
}
}
activity_selector = true;
}
activity_selector = !activity_selector
}

$(".image_activitys:nth-child(1)").click(function () {
setBackgroundAndSelector(".image_activitys:nth-child(1)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Jogging)", jogging_selected);
});

$(".image_activitys:nth-child(2)").click(function () {
setBackgroundAndSelector(".image_activitys:nth-child(2)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Soccer)", soccer_selected);
});

$(".image_activitys:nth-child(3)").click(function () {
setBackgroundAndSelector(".image_activitys:nth-child(3)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Tennis)", tennis_selected);
});

$(".image_activitys:nth-child(4)").click(function () {
setBackgroundAndSelector(".image_activitys:nth-child(4)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Golf)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Golf)", golf_selected);
});


// This is the function which does not work properly

$("#button_step3").click(function() {
if(jogging_selected || soccer_selected || tennis_selected || golf_selected){
$("#wrapper_fitcalc_content_step2" ).css( "display", "none" );
$("#wrapper_fitcalc_content_step3" ).css( "display", "block" );
}
else{
window.scrollTo(0, 0);
alert("Please select a sport");
console.log(jogging_selected);
}
});
});

.image_activitys{
margin: 5px;
width: 128px;
height: 128px;
}

.image_activitys:nth-child(1){
background:url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging);
}
.image_activitys:nth-child(1):hover{
background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Jogging) !important;
cursor: pointer;
}
.image_activitys:nth-child(2){
background:url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer);
}
.image_activitys:nth-child(2):hover{
background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Soccer) !important;
cursor: pointer;
}
.image_activitys:nth-child(3){
background:url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis);
}
.image_activitys:nth-child(3):hover{
background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Tennis) !important;
cursor: pointer;
}
.image_activitys:nth-child(4){
background:url(http://dummyimage.com/128x128/000000/fff.png&text=Golf);
}
.image_activitys:nth-child(4):hover{
background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Golf) !important;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div id="wrapper_fitcalc_content_step2">

<div class="image_activitys" title="Jogging"></div>
<div class="image_activitys" title="Soccer"></div>
<div class="image_activitys" title="Tennis"></div>
<div class="image_activitys" title="Golf"></div>

<!-- There are several more of this divs which I just deleted for my post -->

<input type="button" value="to Step 3" id="button_step3"/>

</div>





Maybe you guys see why he always goes to the else part in the $("#button_step3").click(function(){}?

Answer

Can try following code. It may help you.

$(document).ready(function() {    
      
  var jogging_selected = false;
  var soccer_selected = false;
  var tennis_selected = false;
  var golf_selected = false;
    	
  function setBackgroundAndSelector(childnumber, imagepath_black, imagepath_orange, activity_selector){
    if(activity_selector){
      $(childnumber).css( "background", imagepath_black)
      return !activity_selector;
    }
    else{
      $(".image_activitys:nth-child(1)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging)" );
      $(".image_activitys:nth-child(2)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer)" );
      $(".image_activitys:nth-child(3)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis)" );
      $(".image_activitys:nth-child(4)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Golf)" );
      jogging_selected = false;
      soccer_selected = false;
      tennis_selected = false;
      golf_selected = false;
      for(i=1; i<5; i++){
        if('.image_activitys:nth-child('+i+')' == childnumber){
          $(childnumber).css( 'background', imagepath_orange );
        }
      }
      return true;
    }
    return !activity_selector;
   }
      
   $(".image_activitys:nth-child(1)").click(function () {
    jogging_selected = setBackgroundAndSelector(".image_activitys:nth-child(1)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Jogging)", jogging_selected);
   });
    	
   $(".image_activitys:nth-child(2)").click(function () {
    soccer_selected = setBackgroundAndSelector(".image_activitys:nth-child(2)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Soccer)", soccer_selected);
  });
    	
  $(".image_activitys:nth-child(3)").click(function () {
    tennis_selected = setBackgroundAndSelector(".image_activitys:nth-child(3)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Tennis)", tennis_selected);
  });
    	
  $(".image_activitys:nth-child(4)").click(function () {
     golf_selected = setBackgroundAndSelector(".image_activitys:nth-child(4)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Golf)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Golf)", golf_selected);
  });
      
      
  // This is the function which does not work properly
      
  $("#button_step3").click(function() {
    if(jogging_selected || soccer_selected  || tennis_selected  || golf_selected){
      $("#wrapper_fitcalc_content_step2" ).css( "display", "none" );
      $("#wrapper_fitcalc_content_step3" ).css( "display", "block" );
    }
    else{
      window.scrollTo(0, 0);
      alert("Please select a sport");
    }
  });
});
.image_activitys{
	margin: 5px;
	width: 128px;
	height: 128px;
}

.image_activitys:nth-child(1){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging); 
}
.image_activitys:nth-child(1):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Jogging) !important;
  cursor: pointer;
}
.image_activitys:nth-child(2){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer);
}
.image_activitys:nth-child(2):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Soccer) !important;
  cursor: pointer;
}
.image_activitys:nth-child(3){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis);
}
.image_activitys:nth-child(3):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Tennis) !important;
  cursor: pointer;
}
.image_activitys:nth-child(4){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Golf);
}
.image_activitys:nth-child(4):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Golf) !important;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div id="wrapper_fitcalc_content_step2">
      
  <div class="image_activitys" title="Jogging"></div>
  <div class="image_activitys" title="Soccer"></div>
  <div class="image_activitys" title="Tennis"></div>
  <div class="image_activitys" title="Golf"></div>
          
  <!-- There are several more of this divs which I just deleted for my post -->
      
  <input type="button" value="to Step 3" id="button_step3"/>
      
</div>