在for循环中的if语句

Question

在for循环中的if语句

3

这是我在网页课上刚刚得到的任务，老实说我没有一个讲师清楚地解释过for循环如何工作。基本上，我需要一个变量来存储所有输入，以及一个for循环来遍历每个输入并将其添加到总和中，而不是定义一堆不同的变量并为每个变量编写一堆if语句。我包含了我的代码，该代码无需循环即可完成工作，以及我尝试使用循环进行操作的代码。我真的无法理解循环，并且在网上阅读也没有帮助。

这段代码实现了最终目标：

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

这段代码是我尝试使用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 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>

- Ben Olson

使用 document.getElementsByTagName("input");。 - 4castle

3个回答

0

需要注意的几点：

document.getElementsByTagName("input") 将按标签名称生成输入DOM元素列表，因此不再需要ID。您还可以在表单标记上放置起始ID，然后执行 form.getElementsByTagName
您没有结果div来显示总结果，导致js错误，停止执行
您在for循环中使用了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>

- Ben Sewards

循环后需要将orderTotal乘以税率。此外，输出语句中有一个随机的, false。itemTotal不需要存在。 - 4castle

是的，我只是专注于修复for循环，我正在进行更多的更新，这里的人们回答得非常快。谢谢，问题已解决！ - Ben Sewards

0

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

- Carorus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sanchit · Accepted Answer

这段代码中有很多可以改进的地方，但现在让我只关注你想要了解的for循环知识。

我将按照以下方式重新排列您的代码：

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

正如您所看到的，我们现在将您的代码分为两步：

获取某些内容（检查状态）

将其添加到总数中（价格是硬编码）。让我们升级它，使其更加动态化。

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）来动态获取项目并更新总金额。循环（以及一般的循环）用于重复性工作。只需找出需要重复执行的内容以及需要重复多少次即可。您可以设置循环变量的起始和结束值，以方便自己。