Добавить к итогу в JavaScript

Question

Я пытаюсь заставить форму работать ... У меня есть основной код, и я работаю над тем, чтобы изменить orderTotal (изначально равный 0) и добавить к нему, основываясь на том, что пользователь нажимает. Я ищу использовать простой ванильный 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 было добавлено к заказу и отображено ... но я не уверен, как заставить ее отображать(а также чтобы убедиться, что он рассчитывается).

Спасибо!

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. Это, как вы можете догадаться, устанавливает содержимое <p> в orderTotal. Ваша предыдущая строка даже не ссылалась на orderTotal. ИДК, если бы он работал с = orderTotal в конце, но я знаю, что моя версия будет работать.