Изменение переменной JavaScript с помощью onclick

Question

Я хочу изменить переменную внутри флажка, который заставляет оператор if вычислять без перезагрузки страницы, но я изо всех сил ... все еще учусь, извините!

Вот соответствующий код:

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

Спасибо!

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>

Во-первых, вам нужно событие onchange, которое вызывается при изменении состояния флажка. this.checked возвращает логическое значение (true или false) в зависимости от этого состояния. Во-вторых, оператор if обрабатывается только один раз, когда страница загружает этот скрипт. Поместите его в функцию, чтобы вызвать его снова.

Answer 2

Вам нужно вызвать функцию в своем клике, потому что скрипт у вас сейчас:

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

Выполняется до того, как произойдет ваш клик.

Попробуйте это:

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

Answer 3

Во-первых, ваша логика никогда не установит для салата значение false.Я понимаю, что мы должны есть больше салата, но мы все равно должны предоставить пользователю выбор;)

Во-вторых, постарайтесь не допускать вашего JavaScript в 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>

Рабочая демонстрация:http://jsfiddle.net/AlienWebguy/renut/

Answer 4

Оберните оператор if в функцию, а затем вызовите функцию в событии onclick.

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

Answer 5

Когда я вызываю встроенные функции javascript из html-элемента, я немного съеживаюсь.

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

Answer 6

Установка lettuce=true не приведет к выполнению оператора if.Вам просто нужно написать функцию, которая будет запускаться при нажатии вашего флажка.

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

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

functionName () вызывается при установке флажка.