如何将我的选择列表、单选和复选框加起来？

Question

我需要一些关于如何将我的选择列表添加到我的总数的指导。 我还是 javascript 的新手，所以我尽我所能，但由于某种原因，我无法弄清楚如何将选择列表添加到我的总数中。 带有 0.00 的文本框可供我查看收音机、复选框和选择是否正确添加。

 `` ` function customerInfo(cName){ var dinerName = document.getElementById(cName).value; document.getElementById('cust_name').innerHTML = dinerName; } // format val to n number of decimal places function formatDecimal(val, n) { n = n || 2; var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) ); while (str.length <= n) { str = "0" + str; } var pt = str.length - n; return str.slice(0,pt) + "." + str.slice(pt); } function getRadioVal(form, name) { var radios = form.elements[name]; var val; for (var i=0, len=radios.length; i<len; i++) { if ( radios[i].checked == true ) { val = radios[i].value; break; } } return val; } function getToppingsTotal(e) { var form = this.form; var val = parseFloat( form.elements['tops_tot'].value ); if ( this.checked == true ) { val += parseFloat(this.value); } else { val -= parseFloat(this.value); } form.elements['tops_tot'].value = formatDecimal(val); updatePizzaTotal(form); } function getSizePrice(e) { this.form.elements['sz_tot'].value = parseFloat( this.value ); updatePizzaTotal(this.form); } function getDeliveryPrice(e){ selectElement = document.querySelector('#pick_delivery'); output = selectElement.options[selectElement.selectedIndex].value; console.log(output); } function updatePizzaTotal(form) { var sz_tot = parseFloat( form.elements['sz_tot'].value ); var tops_tot = parseFloat( form.elements['tops_tot'].value ); form.elements['total'].value = formatDecimal( sz_tot + tops_tot ); } // removes from global namespace (function() { var form = document.getElementById('pizzaForm'); var el = document.getElementById('pizza_toppings'); // input in toppings container element var tops = el.getElementsByTagName('input'); for (var i=0, len=tops.length; i<len; i++) { if ( tops[i].type === 'checkbox' ) { tops[i].onclick = getToppingsTotal; } } var sz = form.elements['size']; for (var i=0, len=sz.length; i<len; i++) { sz[i].onclick = getSizePrice; } // set sz_tot to value of selected form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'size') ) ); updatePizzaTotal(form); })(); // end remove from global namespace and invoke

 <form name="pizzaOrder" method="post" id="pizzaForm" enctype="text/plain"> <fieldset style="width: 60%;"> <legend>Create Your Pizza</legend> <h3>Customer's Name:</h3> <p> <input type="text" name="client_name" id="client_name" value="First and Last Name" size="30" value="" /> <input type="button" onclick="customerInfo('client_name')" value="Enter"></button> </p> <h3>Pick Your Size:</h3> <p> <label><input type="radio" name="size" value="8" /> Small</label> <label><input type="radio" name="size" value="10" /> Medium</label> <label><input type="radio" name="size" value="12" /> Large</label> <label><input type="radio" name="size" value="14" checked/> Extra Large</label> <input type="text" name="sz_tot" value="0.00" /> </p> <h3>Pick Your Toppings</h3> <p id="pizza_toppings"> <label><input type="checkbox" name="Pineapple" value="1.50" /> Pineapple</label> <label><input type="checkbox" name="Onions" value="1.50" /> Onions </label> <label><input type="checkbox" name="Ham" value="1.50" /> Ham</label> <label><input type="checkbox" name="Sausage" value="1.50" /> Sausage</label> <label><input type="checkbox" name="Pepperoni" value="1.50" /> Pepperoni</label> <input type="text" name="tops_tot" value="0.00" /> </p> <h3>Delivery Or Pick Up</h3> <p> <select class="delivery" id="pick_delivery" size="2"> <option value="0">Pick Up: Free</option> <option value="2">Delivery: $2</option> </select> <input type="button" onclick="getDeliveryPrice()" id="delivery_pick" value="enter" /></button> </p> <p> <label>Total: $ <input type="text" name="total" class="num" value="0.00" readonly="readonly" /></label> </p> <p> <a href="result.php" target="_blank"><input type="button" value="Confirm" /></a> <a href="cancel.php" target="_blank"><input type="button" value="Cancel"></a> </p> </fieldset> </form> <div> <h2>Your Order:</h2> <p> <h4>Your Name: <span id="cust_name">&nbsp;</span></h4> <h4>Your Pizza Size:</h4> <h4>Toppings Selected:</h4> </p> </div> </fieldset> </form>```

在页面底部，结果应类似于以下内容：

Your Name: Pam Love
Pizza Size Selected: Extra Large
Toppings Selected: Bacon, Pineapple, Ham    
Total:  20.50

单击确认订单时，onclick 按钮应将页面重定向到一个新选项卡，该选项卡显示：

Your order will be ready in 20 minutes.

或者如果取消，则用户单击取消按钮也会重定向到新选项卡：

Your order is cancelled.

Answer 1

您可以使用一些 css 选择器来完成大部分工作。

以下是如何获得您选择的尺寸：

 document.querySelector('input[type="radio"][name="size"]:checked').value

以下是获取浇头列表的方法：

 [...document.querySelectorAll('input[type="checkbox"][name="topping"]:checked')].map((t) => t.value).join(', ')

使用 querySelector 或 getElementById 应该很容易找到其余的东西