Javascript 价格计算器问题

Javascript Price Calculator Issues

本文关键字：问题 计算器 Javascript      更新时间：2023-09-26

我已经尝试过几次创建价格计算器，但是价格永远不会显示在最后，因为它应该是。我仍然是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>

你的代码中有一些问题。

  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>

我已经解决了您的javascript中的小问题，如下所示，它将对您有所帮助。

function getEventDuration() {
    var EventDuration = 0;
    var theForm = document.forms["quote"];
    var selectedEventDuration = theForm.elements["selectedDuration"];
    for (var i = 0; i < selectedEventDuration.length; i++) {
        if (selectedEventDuration[i].checked) {
            EventDuration = eventDurationArray[selectedEventDuration[i].value];
            break;
        }
    }
    return EventDuration;
}
//DIV - TOTAL PRICE TEST
function getTotals() {
    var totalPrice = getEventDuration();
    var totalPriceDIV = document.getElementById("totalPrice");
    totalPriceDIV.innerHTML = "Total: $" + totalPrice;
}

信息 ：- # 是 jquery 元素的指示符，所以当你只使用 javascript 时，它不是必需的。

打开代码示例的检查器，显示elements未定义。

我建议使用 document.querySelector 来查找活动的单选按钮。

EventDuration = document.querySelector("input[name= selectedDuration]:checked").value

此外，getElementById期望只有一个id，没有#。同样，我倾向于坚持document.querySelector，让事情变得简单。

用document.getElementById("totalPrice");更改document.getElementById("#totalPrice");

相关文章：