why my code doesnt run right? whats the promble of this if statment?

user_13593813 0
Viewed 73

iam desiging a web site that can change the prices when for first time i click on slider the price become 19.99 and for the next time my price become 199.99. my project is this https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC

im using a variable if the variable ==1 then change the price to 199.99 and when the variable ==2 then change price to 19.99 ; but every time i click the price stays on 19.99:/

$(function(){
    var m = 1;
    $(".switch").click(function(){
        if(m == 1){
            alert("hi");
        $("#h1").html("$199.99");
        $("#h2").html("$249.99");
        $("#h3").html("$399.99");
            m = 0;
        } else{
            alert("bye");
            $("#h1").html("$19.99");
        $("#h2").html("$24.99");
        $("#h3").html("$39.99");
            m = 0;
        }
        
    });
    
});

when i click both hi and bye alerts ,alerted and i dont know why ???:/// the return statment in if block also doesn't the solution, i tried.

web css html jquery javascript
3 Answers

As far as I think price ain't defined.

user_133499350 

$(".switch").click(function(){
if(document.getElementById('isAgeSelected').checked) {
        
        $("#h1").html("$199.99");
      $("#h2").html("$249.99");
      $("#h3").html("$399.99");
    } else {
        
         $("#h1").html("$19.99");
      $("#h2").html("$24.99");
      $("#h3").html("$39.99");
    }
    
 });
 $(document).ready(function(){
 if(document.getElementById('isAgeSelected').checked) {
        
        $("#h1").html("$199.99");
      $("#h2").html("$249.99");
      $("#h3").html("$399.99");
    } else {
        
         $("#h1").html("$19.99");
      $("#h2").html("$24.99");
      $("#h3").html("$39.99");
    }
 });
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
  <input type="checkbox" id="isAgeSelected" value="Yes">
  <span class="slider"></span>
</label> 

 <div id="h1"></div>
  <div id="h2"></div>
  <div id="h3"></div>

I HOPE THIS MIGHT SOLVE YOUR PROBLEM IN A EASY WAY

user_134321830

Considering your limited code, I tried recreating it:

Looks like you're not passing prices values correctly, the if and else conditions are correct, you can change the values in the first line and try checking it, I was able to run both the conditions. The issues seems you're not sending the correct values to prices. 

var prices = 0; /* change to you values here from 0 to 1 */

$(document).ready(function() {
  var m = 1;
  $(".divSwitch").click(function() {
    if (prices == 1) {
      alert("hi");
      $("#h1").html("$199.99");
      $("#h2").html("$249.99");
      $("#h3").html("$399.99");
      m = 0;
    } else {
      alert("bye");
      $("#h1").html("$19.99");
      $("#h2").html("$24.99");
      $("#h3").html("$39.99");
      m = 0;
    }

  });
});
.divSwitch {
  background-color: red;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divSwitch" sytle="height:50px;width:50px;background-color:red;">Click here.
  <div id="h1"></div>
  <div id="h2"></div>
  <div id="h3"></div>
</div>

user_35643590
Related