html - jQuery .css not changing element css -

i trying make chart changes size relative amount of variable. variable increase , decrease according checkbox user ticks. graphs display fine have set height in css see how look, though when click button "#submit" nothing occurs. point out issue in code?

code:

//vote count variables  var ag = 2;  var nag = 0;    //make 1 checkbox tickable.  $('input[type="checkbox"]').on('change', function() {    $('input[type="checkbox"]').not(this).prop('checked', false);  });    //function refresh charts new vote amounts.  function refreshchart() {    $(".for").css({      'height': ag * 60 + 'px;'    });    $(".for not").css({      'height': nag * 60 + 'px;'    });  }    //refresh charts user on submit click.   $('#submit').click(function() {    if ($('#c1').prop('checked') == true) {      ag += 1;    }    if ($('#c2').prop('checked') == true) {      nag += 1;    }    refreshchart();    });

.results {    color: #111;    display: show;    align-items: center;  }    .for {    display: block;    margin: 0 auto;    background-color: #27ae5f;    width: 20px;    height: 100px;    padding: 20px;    text-align: center;    font-size: 11px;    color: #fff;  }    .not {    background-color: #c0392b;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="checkcont">      <div class="stylec">      <input id="c1" type="checkbox">      <label for="c1"> </label>    </div>    <p> agree restrictions placed on imported cars should removed or limited. </p> <br>    <div class="stylec">      <input id="c2" type="checkbox">      <label for="c2"> </label>    </div>    <p> believe current restrictions , regulations should not altered. </p>  </div>  </div>  <div class="results">    <h2> current standings of opinions submitted </h2>    <div class="for">      <p class="resultsno yes"> 2 </p>    </div>    <div class="for not">      <p class="resultsno no"> 0 </p>    </div>    </div>  <a id="submit"> submit </a>  </div>  </div>

the selector .for not means tag <not> inside element class="for". select element class="for not", need use .for.not.

the problem .css() code put ; after px. px; not valid size unit. it's part of syntax of style attribute or stylesheet, not part of syntax of specific css property.

you can leave out unit, jquery defaults pixels. call .height() function.

//vote count variables  var ag = 2;  var nag = 0;    //make 1 checkbox tickable.  $('input[type="checkbox"]').on('change', function() {    $('input[type="checkbox"]').not(this).prop('checked', false);  });    //function refresh charts new vote amounts.  function refreshchart() {    $(".for").height(ag * 60);    $(".for.not").height(nag * 60);  }    //refresh charts user on submit click.   $('#submit').click(function() {    if ($('#c1').prop('checked') == true) {      ag += 1;    }    if ($('#c2').prop('checked') == true) {      nag += 1;    }    refreshchart();    });

.results {    color: #111;    display: show;    align-items: center;  }    .for {    display: block;    margin: 0 auto;    background-color: #27ae5f;    width: 20px;    height: 100px;    padding: 20px;    text-align: center;    font-size: 11px;    color: #fff;  }    .not {    background-color: #c0392b;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="checkcont">      <div class="stylec">      <input id="c1" type="checkbox">      <label for="c1"> </label>    </div>    <p> agree restrictions placed on imported cars should removed or limited. </p> <br>    <div class="stylec">      <input id="c2" type="checkbox">      <label for="c2"> </label>    </div>    <p> believe current restrictions , regulations should not altered. </p>  </div>  </div>  <div class="results">    <h2> current standings of opinions submitted </h2>    <div class="for">      <p class="resultsno yes"> 2 </p>    </div>    <div class="for not">      <p class="resultsno no"> 0 </p>    </div>    </div>  <a id="submit"> submit </a>  </div>  </div>