Javascript variable change with onclick

Question

I want to have a variable changed within a checkbox that causes an if statement to compute without reloading the page, but I'm struggling... still learning, sorry!

Here's the relevant code:

 <!--Variable declaration-->
 <script type="text/javascript"> var lettuce = false; </script>

 <!--The following line is within a form-->
 <input type="checkbox" onclick="lettuce=true" name="food" value="lettuce" /> Lettuce<br />

 <--the if statement-->
 <script type="text/javascript">    
      if (lettuce == true) {
    document.write("45");   
  }
 </script>

Thanks!

Answer 1

<input type="checkbox" onchange="lettuce=this.checked; recompute();" name="food" value="lettuce" /> Lettuce<br />

<script type="text/javascript">
function recompute()    
      if (lettuce == true) {
    document.write("45");   
  }
}
 </script>

First, you want the onchange event, which is called when the state of the checkbox changes. The this.checked returns the boolean value (true or false) depending on that state. Second, the if statement is only processed once, when the page loads that script. Place it in a function to call it again.

Answer 2

First, your logic will never set lettuce to false. I understand that we should eat more lettuce, but we should still give the user a choice ;)

Secondly, try to keep your Javascript out of the html:

 <!--Variable declaration-->
 <script type="text/javascript"> var lettuce = false; </script>

 <!--The following line is within a form-->
 <input type="checkbox" id="lettuce" name="food" value="lettuce" /> Lettuce<br />

 <script type="text/javascript">  
      document.getElementById('lettuce').addEventListener('click',checkLettuce,false);
      function checkLettuce(){ 

          if (document.getElementById('lettuce').checked === true) {
             lettuce = true;
             document.write("45");  
          } 
          else
          {
             lettuce = false;
          }
      }
 </script>

Working demo: http://jsfiddle.net/AlienWebguy/renut/

Answer 3

Wrap the if statement into a function and then call the function in the onclick event.

 <!--Variable declaration-->
 <script type="text/javascript"> var lettuce = false; </script>

 <!--The following line is within a form-->
 <input type="checkbox" onclick="my_function();" name="food" value="lettuce" /> Lettuce<br />

 <!--the if statement-->
 <script type="text/javascript">
      function my_function() {
          if (lettuce == true) {
              lettuce = false;
          } else {
              lettuce = true;
              document.write("45");
          }
      }
 </script>