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!

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!

• javascript
• variables
• checkbox
• onclick

• Also the comments were added above -- the problem with the comment above the if statement is not the issue. – user868443 Commented Jul 29, 2011 at 19:07

6 Answers 6

<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.

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/

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>

You need to call a function in your onclick, because the script you have now:

if(lettuce == true){
    document.write("45");   
}

Executes before your onclick ever occurs.

Try this:

 <!--The following line is within a form-->
 <input type="checkbox" onclick="clicked(true);" name="food" value="Lettuce" /> Lettuce<br />
 <input type="checkbox" onclick="clicked(false);" name="food" value="Carrot" /> Carrot<br />
 <input type="checkbox" onclick="clicked(false);" name="food" value="Cool Beans" /> Cool Beans<br />
 <input type="checkbox" onclick="clicked(false);" name="food" value="Pepper" /> Pepper<br />
 <--the if statement-->
 <script type="text/javascript">    
    function clicked(lettuce){
         if(lettuce)
             alert('You toggled Lettuce!');
         else
             alert('You toggled some other vegetable!');
    }
 </script>

Setting lettuce=true wont cause your if statement to run. You just need to write a function that will run when your checkbox is clicked.

<input type="checkbox" onclick="functionName()".../>Lettuce</br/>

<script type="text/javascript">
function functionName(){
    document.write("45");
}
</script> 

functionName() is called when the check box is clicked.

Seeing javascript functions being invoked inline from an html element makes me cringe a little.

<input type="checkbox" id="chkLettuce" name="food" value="lettuce" /> Lettuce<br />

 <--the if statement-->

 <script type="text/javascript"> 
   var chkLettuce = document.getElementById("chkLettuce");
   chkLettuce.onclick = chkLettuce.click = function() {
      lettuce = !!chkLettuce.checked;
      if(lettuce){
         alert('45 or whatever');
      }
   }
 </script>