在 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 pizzafunction 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() {

  // FIX: you don't need this variable since it's not accessible from other functions

  // orderTotal = 0;

  sizeOfPizza();

  // FIX: this function does not exist, put it back when you define it

  // crustOfPizza();

  //displayoutput(); 

  

  var total = sizeOfPizza();

  // FIX: use this approach

  document.getElementById("orderTotal").innerText = total;

}

//display choice of size of pizza

function sizeOfPizza() {

  // FIX: put the variable here so rest of this function can access it

  let orderTotal = 0;

  

  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 

  }

  // FIX: return the result

  return orderTotal;

}

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

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，但我知道我的版本可以使用。