添加到总计 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  to the total price
  } else if (size[1].checked) //if Medium is checked
  {
    orderTotal += 8.00 //add  to the total price 
  } else if (size[2].checked) //if Large is checked
  {
    orderTotal += 10.00 //add  to the total price 
  } else if (size[3].checked) //if Extra Large is checked
  {
    orderTotal += 12.00 //add  to the total price 
  } else if (size[4].checked) //if Holy Pizza is checked
  {
    orderTotal += 20.00 //add  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

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

Answer 2

这是解决方法，请注意带有 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  to the total price
  }
  else if (size[1].checked) //if Medium is checked
  {
    orderTotal += 8.00 //add  to the total price 
  }
  else if (size[2].checked) //if Large is checked
  {
    orderTotal += 10.00 //add  to the total price 
  }
  else if (size[3].checked) //if Extra Large is checked
  {
    orderTotal += 12.00 //add  to the total price 
  }
  else if (size[4].checked) //if Holy Pizza is checked
  {
    orderTotal += 20.00 //add  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 3

首先，您将 total 设置为 sizeOfPizza()，而 return 没有任何值，因此 total 为空。 sizeOfPizza 和 () 之间还有一个 space，这可能会影响该函数的执行。您还应该将所有这些 if else 语句更改为通过数组 size 或 switch case 语句的迭代。您也不设置 orderTotal 元素的值。为此，只需 document.getElementById("orderTotal").textContent = orderTotal;

试一试，看看是否有效。如果没有，请参考错误消息

添加到总计 JavaScript

Add to a Total in JavaScript

javascript

calculation