在 JavaScript 中添加到总计

Question

我正在尝试使表单工作......我有基本代码，我正在修改 orderTotal（最初设置为 0）并根据用户单击的内容添加到它。我希望在没有服务器的情况下使用简单的 vanilla Javascript。

function processOrder() {

  orderTotal = 0;

  sizeOfPizza();

  crustOfPizza();

  //displayoutput(); 

  var total = sizeOfPizza();

  document.getElementById("orderTotal").value.display

}

//display choice of size of pizza

function sizeOfPizza() {

  var size = document.getElementsByName("size");

  if (size[0].checked) //if Personal is checked

  {

    orderTotal += 5.00 //add $5 to the total price

  } else if (size[1].checked) //if Medium is checked

  {

    orderTotal += 8.00 //add $8 to the total price 

  } else if (size[2].checked) //if Large is checked

  {

    orderTotal += 10.00 //add $10 to the total price 

  } else if (size[3].checked) //if Extra Large is checked

  {

    orderTotal += 12.00 //add $12 to the total price 

  } else if (size[4].checked) //if Holy Pizza is checked

  {

    orderTotal += 20.00 //add $20 to the total price 

  }

}

<h3> Select Size </h3>

<form action="" id="pizza-size">

  <input type="radio" name="size" value="Personal"> Personal (4 Slices) <br>

  <input type="radio" name="size" value="Medium"> Medium (8 slices)<br>

  <input type="radio" name="size" value="Large"> Large (10 slices) <br>

  <input type="radio" name="size" value="Extra Large"> Extra Large (12 slices)<br>

  <input type="radio" name="size" value="Holy Pizza"> Holy Pizza Batman (24 slices) <br>

</form>

<br>

<input type="button" onclick="processOrder()" value="Preview Order">

<p>Total will appear here: </p>

<p id="orderTotal"> </p>

所以基本上如果用户选择中等披萨我想要 8.00 添加到 orderTotal 并显示......但我不确定如何让它显示（以及确保它正在计算）。

Answer 1

这是修复，请注意带有FIX标签的评论function processOrder() {&nbsp; // FIX: you don't need this variable since it's not accessible from other functions&nbsp; // orderTotal = 0;&nbsp; sizeOfPizza();&nbsp; // FIX: this function does not exist, put it back when you define it&nbsp; // crustOfPizza();&nbsp; //displayoutput();&nbsp;&nbsp;&nbsp;&nbsp; var total = sizeOfPizza();&nbsp; // FIX: use this approach&nbsp; document.getElementById("orderTotal").innerText = total;}//display choice of size of pizzafunction sizeOfPizza() {&nbsp; // FIX: put the variable here so rest of this function can access it&nbsp; let orderTotal = 0;&nbsp;&nbsp;&nbsp; var size = document.getElementsByName("size");&nbsp; if (size[0].checked) //if Personal is checked&nbsp; {&nbsp; &nbsp; orderTotal += 5.00 //add $5 to the total price&nbsp; }&nbsp; else if (size[1].checked) //if Medium is checked&nbsp; {&nbsp; &nbsp; orderTotal += 8.00 //add $8 to the total price&nbsp;&nbsp; }&nbsp; else if (size[2].checked) //if Large is checked&nbsp; {&nbsp; &nbsp; orderTotal += 10.00 //add $10 to the total price&nbsp;&nbsp; }&nbsp; else if (size[3].checked) //if Extra Large is checked&nbsp; {&nbsp; &nbsp; orderTotal += 12.00 //add $12 to the total price&nbsp;&nbsp; }&nbsp; else if (size[4].checked) //if Holy Pizza is checked&nbsp; {&nbsp; &nbsp; orderTotal += 20.00 //add $20 to the total price&nbsp;&nbsp; }&nbsp; // FIX: return the result&nbsp; return orderTotal;}<h3>Select Size</h3><form action="" id="pizza-size">&nbsp; &nbsp; <input type="radio" name="size" value="Personal" /> Personal (4 Slices) <br />&nbsp; &nbsp; <input type="radio" name="size" value="Medium" /> Medium (8 slices)<br />&nbsp; &nbsp; <input type="radio" name="size" value="Large" /> Large (10 slices) <br />&nbsp; &nbsp; <input type="radio" name="size" value="Extra Large" /> Extra Large (12 slices)<br />&nbsp; &nbsp; <input type="radio" name="size" value="Holy Pizza" /> Holy Pizza Batman (24 slices) <br /></form><br /><input type="button" onclick="processOrder()" value="Preview Order" /><p>Total will appear here:</p><p id="orderTotal"></p>

Answer 2

首先，您选择设置total到sizeOfPizza()哪个犯规返回任何值，因此total为空。sizeOfPizza和之间还有一个空格()，可能会影响该函数的执行。您还应该将所有这些if else语句更改为遍历数组size或switch case语句的迭代。您也不设置orderTotal元素的值。要做到这一点就做document.getElementById("orderTotal").textContent = orderTotal;试试这个，看看它是否有效。如果没有，请参考我的错误消息

Answer 3

尝试替换document.getElementById("orderTotal").value.display为document.getElementById("orderTotal").innerHTML = orderTotal.This，正如您可能猜到的那样，将 的内容设置<p>为 orderTotal。您的前一行甚至没有引用 orderTotal。我不知道它最后是否可以使用= orderTotal，但我知道我的版本可以使用。