JavaScript价格计算器问题

Question

我已经尝试过几次创建价格计算器，但是价格永远不会像应有的那样显示在最后。 我对Java脚本还是陌生的，所以我不确定是否编码错误。 我相信我已经足够了解它应该出现，但是也许有人在这里可能看到我在代码中做错了什么？

 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");删除# 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> 

Answer 2

我已经按照下面的方法解决了您的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时则不需要。

Answer 3

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

Answer 4

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

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

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

此外， getElementById期望只包含一个id，没有# 。 同样，我倾向于对所有内容都使用document.querySelector ，使事情保持简单。