Оператор if в цикле for

Question

Так что это задание, которое я получил только в своем веб-классе, и, честно говоря, у меня не было ни одного инструктора, который бы четко объяснил, как работает цикл for. В основном вместо того, чтобы иметь кучу разных переменных var и кучу операторов if для каждого из них, мне нужен один var для всех входов и цикл for, который будет проходить через каждый вход и добавлять к итогу. Я включил свой код, который работал, который не имеет цикла, и моя попытка использовать цикл для этого. Я просто не могу понять петли, и чтение в Интернете не помогло вообще.

Этот код делает то, что конечная цель:

<article> 
     <h2>Food Menu</h2> 
     <form> 
     <input type="checkbox" id="item1" value="8" /> 
     <label for="item1">Fried chicken ($8.00)</label> 
     <input type="checkbox" id="item2" value="9" /> 
     <label for="item2">Honey Baked Ham ($9.00)</label> 
     <input type="checkbox" id="item3" value="8" /> 
     <label for="item3">Mac and Cheese ($8.00)</label> 
     <input type="checkbox" id="item4" value="13" /> 
     <label for="item4">Grilled Salmon ($13.00)</label> 
     <input type="checkbox" id="item5" value="6" /> 
     <label for="item5">Side salad ($6.00)</label> 
     <input type="submit" id="submit" value="Submit" /> 
     </form> 

     <script> 

     function calcTotal(){ 
      var itemTotal=0; 
      var item1=document.getElementById("item1"); 
      var item2=document.getElementById("item2"); 
      var item3=document.getElementById("item3"); 
      var item4=document.getElementById("item4"); 
      var item5=document.getElementById("item5"); 
      if(item1.checked==true){itemTotal+=8;} 
      if(item2.checked==true){itemTotal+=9;} 
      if(item3.checked==true){itemTotal+=8;} 
      if(item4.checked==true){itemTotal+=13;} 
      if(item5.checked==true){itemTotal+=6;} 
      var salesTaxRate=0.07; 
      var orderTotal=itemTotal+(itemTotal*salesTaxRate); 
      document.getElementById("total").innerHTML="Your order total is $"+orderTotal,false; 

     } 

     document.getElementById("submit").addEventListener("click",calcTotal,false); 

     ; 
     </script> 
    </article> 

Этот код моя попытка получения того же результата с цикл.

<article> 
     <h2>Food Menu</h2> 
     <form> 
     <input type="checkbox" id="item1" value="8" /> 
     <label for="item1">Fried chicken ($8.00)</label> 
     <input type="checkbox" id="item2" value="9" /> 
     <label for="item2">Honey Baked Ham ($9.00)</label> 
     <input type="checkbox" id="item3" value="8" /> 
     <label for="item3">Mac and Cheese ($8.00)</label> 
     <input type="checkbox" id="item4" value="13" /> 
     <label for="item4">Grilled Salmon ($13.00)</label> 
     <input type="checkbox" id="item5" value="6" /> 
     <label for="item5">Side salad ($6.00)</label> 
     <input type="submit" id="submit" value="Submit" /> 
     </form> 

     <script> 

     function calcTotal(){ 
      var itemTotal=0; 
      var items = document.getElementById("input"); 
      var salesTaxRate=0.07; 
      var orderTotal=itemTotal+(itemTotal*salesTaxRate); 
      document.getElementById("total").innerHTML="Your order total is $"+orderTotal,false; 
      for(i=0: i < items.length; i++){ 
       if(input.items[i].checked==true) 
        orderTotal+=(items[i].value*1); 
      } 
      window.alert(itemTotal) 
     } 

     document.getElementById("submit").addEventListener("click",calcTotal,false); 

     ; 
     </script> 
    </article> 

Answer 1

Пару вещей отметить:

• document.getElementsByTagName("input") будет генерировать список элементов ввода DOM по имени тега, так что идентификаторы больше не нужно. Можно также поместить исходный идентификатор на виде тега, а затем сделать form.getElementsByTagName
• вы не имели результата DIV, чтобы отобразить общие результаты, вызывая ошибку JS, которая останавливает выполнение
• вы имели синтаксические ошибки с input.items в течение петля

function myFunction() { 
 
    var itemTotal = 0; 
 
    var items = document.getElementsByTagName("input") 
 
    var salesTaxRate = 0.07; 
 
    var orderTotal = 0; 
 

 
    for (i = 0; i < items.length; i++) { 
 
    if (items[i].checked == true) { 
 
     itemTotal += (items[i].value * 1); 
 
    } 
 
    } 
 

 
    orderTotal = itemTotal + (itemTotal * salesTaxRate); 
 
    document.getElementById("total").innerHTML = "Your order total is $" + orderTotal; 
 

 
    return false; 
 
}

<article> 
 
    <h2>Food Menu</h2> 
 
    <form action="" onsubmit="return myFunction();"> 
 
    <input type="checkbox" id="item1" value="8" /> 
 
    <label for="item1">Fried chicken ($8.00)</label> 
 
    <input type="checkbox" id="item2" value="9" /> 
 
    <label for="item2">Honey Baked Ham ($9.00)</label> 
 
    <input type="checkbox" id="item3" value="8" /> 
 
    <label for="item3">Mac and Cheese ($8.00)</label> 
 
    <input type="checkbox" id="item4" value="13" /> 
 
    <label for="item4">Grilled Salmon ($13.00)</label> 
 
    <input type="checkbox" id="item5" value="6" /> 
 
    <label for="item5">Side salad ($6.00)</label> 
 
    <input type="submit" id="submit" value="Submit" /> 
 
    </form> 
 
    <div id="total"></div> 
 
</article>

Answer 2

Так много вещей, которые вы можете улучшить в этом коде наверняка, но позвольте мне просто придерживаться для цикла знаний вы искать сейчас.

Я собираюсь переставить ваш код следующим образом:

var itemTotal=0; 

var item1=document.getElementById("item1"); 
if(item1.checked==true){itemTotal+=8;} 

var item2=document.getElementById("item2"); 
if(item2.checked==true){itemTotal+=9;} 

var item3=document.getElementById("item3"); 
if(item3.checked==true){itemTotal+=8;} 

var item4=document.getElementById("item4"); 
if(item4.checked==true){itemTotal+=13;} 

var item5=document.getElementById("item5"); 
if(item5.checked==true){itemTotal+=6;} 

Как вы можете видеть, что мы сейчас фрагментированные свой код в два этапа:

1. Получить что-то (проверено состояние)
2. Добавьте его к общей сумме (цена жестко запрограммирована).

Позволяет обновить его, чтобы сделать его более динамичным.

var itemTotal=0; 

var i=1; 
var item1=document.getElementById("item"+i); 
if(item1.checked==true){itemTotal+=parseInt(item1.value);} 

i++ 
var item2=document.getElementById("item"+i); 
if(item2.checked==true){itemTotal+=parseInt(item2.value);} 

i++ 
var item3=document.getElementById("item"+i); 
if(item3.checked==true){itemTotal+=parseInt(item3.value);} 

i++ 
var item4=document.getElementById("item"+i); 
if(item4.checked==true){itemTotal+=parseInt(item4.value);} 

i++ 
var item5=document.getElementById("item"+i); 
if(item5.checked==true){itemTotal+=parseInt(item5.value);} 

Вы заметите функцию parseInt требуемую здесь, так как делать + на струнах просто конкатенации. Если вы поняли, что мы сделали так далеко, мы можем просто сделать это еще на один шаг с циклом for.

var itemTotal=0; 

for (var i=1; i<6; i++) { 
    var item=document.getElementById("item"+i); 
    if(item.checked==true){itemTotal+=parseInt(item.value);} 
} 

Надеюсь, что это имеет смысл. Мы только что использовали некоторые переменные (в частности, i), чтобы получить элементы динамически, а также обновить общую сумму. Для циклов (и циклов в целом) используются для повторной работы. Это просто вопрос о том, что нужно повторять и сколько раз вам нужно повторять. Вы можете установить начальные и конечные значения вашей переменной цикла, чтобы сделать вещи удобными для вас.

Answer 3

<h2>Food Menu</h2> 
    <form> 
    <input type="checkbox" id="item1" value="8" /> 
    <label for="item1">Fried chicken ($8.00)</label> 
    <input type="checkbox" id="item2" value="9" /> 
    <label for="item2">Honey Baked Ham ($9.00)</label> 
    <input type="checkbox" id="item3" value="8" /> 
    <label for="item3">Mac and Cheese ($8.00)</label> 
    <input type="checkbox" id="item4" value="13" /> 
    <label for="item4">Grilled Salmon ($13.00)</label> 
    <input type="checkbox" id="item5" value="6" /> 
    <label for="item5">Side salad ($6.00)</label> 
    <!-- I changed this to be a button just so you can see the results, probably need to be a submit later again, but for now this way you can see how the result changes. -->   
    <input type="button" id="submit" value="Submit" /> 
    </form> 

    <!-- You need an element with id 'total', you were calling it to set the result for total, but it didn't exist --> 
    <label id="total"></label> 
    <script> 

    function calcTotal(){ 
     var itemTotal=0; 

     //use querySelectorAll to get and array with all the inputs, getElementById will return just one element 
     var items = document.querySelectorAll("input"); 
     var salesTaxRate= 0.07; 
     var orderTotal= 0; 


     // you have a sintax error here 
     for(i=0; i < items.length; i++){ 
      if(items[i].checked==true) { 
       itemTotal= parseInt(items[i].value); 
       itemTotal= parseFloat(itemTotal + (itemTotal*salesTaxRate)); 
       orderTotal+=itemTotal; 
      } 
     } 

     // you need to display orderTotal, that is the variable you are incrementing, no itemTotal 
     document.getElementById("total").innerHTML="Your order total is $"+orderTotal; 

     window.alert(orderTotal) 
    } 

    document.getElementById("submit").addEventListener("click",calcTotal,false); 


    </script>