JavaScript 价格计算器问题

Question

我曾多次尝试创建价格计算器，但是价格从未像应该的那样显示在最后。我对 Javascript 还很陌生，所以我不确定是否有代码错误。我相信我足够理解它应该出现，但也许这里有人可能会看到我在代码中做错了什么？

var eventDurationArray = new Array();
eventDurationArray["2hrs"]=120;
eventDurationArray["3hrs"]=180;
eventDurationArray["4hrs"]=240;
eventDurationArray["5hrs"]=300;
eventDurationArray["6hrs"]=360;

//RADIO BUTTON - EVENT DURATION TEST
function getEventDuration() {
  var EventDuration = 0;

  var theForm = document.forms["#quote"];

  var selectedEventDuration = theForm.elements["selectedDuration"];

  for(var i = 0; i < selectedDuration.length; i++)
  {
    if(selectedDuration[i].checked)
    {
      EventDuration = eventDurationArray[selectedDuration[i].value];

      break;
    }
  }

  return EventDuration;
}

//DIV - TOTAL PRICE TEST
function getTotals() {
  var totalPrice = getEventDuration();
  var totalPriceDIV = document.getElementById("#totalPrice");
  totalPriceDIV.innerHTML = "Total: $"+totalPrice;
}

<form id="quote" action="" onsubmit="return false;">
  <input type="radio"  name="selectedDuration" value="2hrs" onclick="getTotals()" />
  Round cake 6" -  serves 8 people ($20)
  <input type="radio"  name="selectedDuration" value="3hrs" onclick="getTotals()" />
  Round cake 8" - serves 12 people ($25)
  <input type="radio"  name="selectedDuration" value="4hrs" onclick="getTotals()" />
  Round cake 10" - serves 16 people($35)
  <input type="radio"  name="selectedDuration" value="5hrs" onclick="getTotals()" />
  Round cake 12" - serves 30 people($75)
  <br />
  <br />
  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>

Answer 1

您的代码存在一些问题..

1. document.forms["quote"] - 删除 # 并设置 name 属性而不是 id .
2. 将 var selectedEventDuration 更改为 var selectedDuration = theForm.elements["selectedDuration"];
3. 从 nt.getElementById("#totalPrice"); 中删除 #

var eventDurationArray = new Array();
eventDurationArray["2hrs"]=120;
eventDurationArray["3hrs"]=180;
eventDurationArray["4hrs"]=240;
eventDurationArray["5hrs"]=300;
eventDurationArray["6hrs"]=360;

//RADIO BUTTON - EVENT DURATION TEST
function getEventDuration() {
  var EventDuration = 0;

  var theForm = document.forms["quote"];

  var selectedDuration = theForm.elements["selectedDuration"];

  for(var i = 0; i < selectedDuration.length; i++)
  {
    if(selectedDuration[i].checked)
    {
      EventDuration = eventDurationArray[selectedDuration[i].value];

      break;
    }
  }

  return EventDuration;
}

//DIV - TOTAL PRICE TEST
function getTotals() {
  var totalPrice = getEventDuration();
  var totalPriceDIV = document.getElementById("totalPrice");
  totalPriceDIV.innerHTML = "Total: $"+totalPrice;
}

<form name="quote" action="" onsubmit="return false;">
  <input type="radio"  name="selectedDuration" value="2hrs" onclick="getTotals()" />
  Round cake 6" -  serves 8 people ($20)
  <input type="radio"  name="selectedDuration" value="3hrs" onclick="getTotals()" />
  Round cake 8" - serves 12 people ($25)
  <input type="radio"  name="selectedDuration" value="4hrs" onclick="getTotals()" />
  Round cake 10" - serves 16 people($35)
  <input type="radio"  name="selectedDuration" value="5hrs" onclick="getTotals()" />
  Round cake 12" - serves 30 people($75)
  <br />
  <br />
  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>