Question

我一直在处理此表单，无法通过CalculateTotal。我完全迷失了如何将其添加到框中并进行显示。有人可以帮忙吗？

这是我的jsfiddle http://jsfiddle.net/clbacon70/x6kjqbop/1/

＆＃13;

var gc_fSandwichPrice = 5.99; // Price for each sandwich 
var gc_fExtrasPrice = 1.50;  // Price for each extra item

// GLOBAL VARS

// Global object vars
var divErrors;
var radSandwich;
var radSize;
var chkExtras;

// Other global vars
var g_fTotal;
var g_sSandwich;
var g_sSize;
var g_sExtras;


window.addEventListener('load', Init);

function Init() {

    document.getElementById("h1Title").innerHTML = "Dirty Deli 1.0";


    var spanExtrasPrice = document.getElementById("spanExtrasPrice");
    var btnCalculateTotal = document.getElementById("btnCalculateTotal");
    divErrors = document.getElementById("divErrors");
    radSandwich = document.getElementsByName('radSandwich');
    radSize = document.getElementsByName('radSize');
    chkExtras = document.getElementsByName('chkExtras');

    spanExtrasPrice.innerHTML = gc_fExtrasPrice.toFixed(2);
    
    btnCalculateTotal.addEventListener('click', CalculateTotal);

} // function Init()



function CalculateTotal() {
        
            divErrors.innerHTML = '';
        
        if (radSandwich[0].checked) {
            g_sSandwich = radSandwich[0].value;
        } else if (radSandwich[1].checked) {
            g_sSandwich = radSandwich[1].value;
        } else if (radSandwich[2].checked) {
            g_sSandwich = radSandwich[2].value;
        } else if (radSandwich[3].checked) {
            g_sSandwich = radSandwich[3].value;
        } else {
            divErrors.innerHTML = "Select a Sandwich";
            return;
        }
        
	    if (radSize[0].checked){
            g_fTotal = radSize[0].title;
        } else if (radSize[1].checked) {
            g_fTotal = radSize[1].title;
        } else if (radSize[2].checked) {
            g_fTotal = radSize[2].title;
        } else {
            divErrors.innerHTML = "Please choose a size";
            return;
        }

	
        if (chkExtras[0].checked) {
            g_sExtras = chkExtras[0].value;
            g_fTotal = g_fTotal + gc_fExtrasPrice;
        }
        if (chkExtras[1].checked) {
            g_sExtras = g_sExtras + ',' + chkExtras[1].value;
            g_fTotal = g_fTotal + gc_fExtrasPrice;      }
        if (chkExtras[2].checked) {
            g_sExtras = g_sExtras +', ' + chkExtras[2].value;
            g_fTotal = g_fTotal + gc_fExtrasPrice;
        }
	
	var textTotal = document.getElementById('textTotal');
	textTotal.value = g_fTotal;

        

	} // function CalculateTotal

function ProcessOrder() {

} // function ProcessOrder

＆＃13;

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #333;
}

#divWrapper {
	background-color: #efe;
	width: 40em;
	border: solid black;
	border-radius: 0 0 20px 20px;
	border-width: 0 1px 1px 1px;
	margin: 0 auto;
	padding: 2em 1em;
}

h2 {
	font-style: italic;
	font-size: 1.3em;
	color: #666;
	margin-top: 0px;
}

input {
	margin-right: 0.3em;
}

h3, p {
	margin: 0.5em 0;
}

div#divErrors {
	font-size: 110%;
	color: white;
	background: #f00;
	margin-bottom: 0.5em;
}

#divPaymentInfo {
	margin: 10px 0 20px 0;
	padding-bottom: 10px;
	border: solid black;
	border-width: 1px 0;
}

#divCreditCardInfo {
	font-size: .8em;
	visibility: hidden;
	margin-left: 1em;
	display: inline;
}

#divOrder {
	background: white;
	min-height: 10em;
	width: 25em;
	border: 1px solid black;
	margin: 0.5em 0;
	padding: 10px;
}

＆＃13;

<body>

<div id="divWrapper">

	<form name="frmMain">

	<h1 id="h1Title">Deli Form</h1>
	<h2>Part 1</h2>

	<h3>Sandwich</h3>
	<label><input type="radio" name="radSandwich" value="Breast of Chicken">Breast of Chicken</label><br>
	<label><input type="radio" name="radSandwich" value="Leg of Lamb">Leg of Lamb</label><br>
	<label><input type="radio" name="radSandwich" value="Loin of Ham">Loin of Ham</label><br>
	<label><input type="radio" name="radSandwich" value="ReelMeat&reg;">ReelMeat&reg;</label><br>
	<br>

	<h3>Size</h3>
	<label><input type="radio" name="radSize" value="Manly Man"  title="$4.99">Manly Man</label>&nbsp;&nbsp;
	<label><input type="radio" name="radSize" value="Girly Man" title="$5.99">Girly Man</label>&nbsp;&nbsp;
	<label><input type="radio" name="radSize" value="Super Girly Man" title="$6.99">Super Girly Man</label>
	<br><br>

	<h3>Extras ($<span id="spanExtrasPrice"></span> each)</h3>
	<label><input type="checkbox" name="chkExtras" value="Deep-Fried Spam">Deep-Fried Spam</label><br>
	<label><input type="checkbox" name="chkExtras" value="Toenails">Toenails</label><br>
	<label><input type="checkbox" name="chkExtras" value="Secret Sauce">Secret Sauce</label><br>
	<br><br>

	Total: <input type="text" id="txtTotal" size="5"> <input type="button" id="btnCalculateTotal" value="Calculate Total">
	<br><br>

	<div id="divErrors"></div>


	<div id="divPaymentInfo">
		<h2>Part 2</h2>

		<strong>Customer's Name:</strong> <input type="text" id="txtName">
		<br><br>

		<strong>Payment:</strong>
		<select id="selPayment">
			<option value="Cash" selected="selected">Cash</option>
			<option value="Check">Check</option>
			<option value="Credit Card">Credit Card</option>
		</select>

		<div id="divCreditCardInfo">
			Card Number: <input type="text" id="txtCreditCardNbr" size="20">&nbsp;&nbsp;

			Month: <input type="text" id="txtMonth" size="2">&nbsp;&nbsp;Year:
			<select id="selYear">
				<option value="" selected="selected"></option>
				<option value="2012">2012</option>
				<option value="2013">2013</option>
				<option value="2014">2014</option>
				<option value="2015">2015</option>
				<option value="2016">2016</option>
				<option value="2010">2017</option>
				<option value="2011">2018</option>
			</select>

		</div><!-- divCreditCardInfo -->

	</div><!-- divPaymentInfo -->


	<input type="button" id="btnProcessOrder" value="Process Order">

	<div id="divOrder"></div>

	<input type="reset" value="Reset">

	</form>

</div> <!-- divWrapper -->

</body>

＆＃13;

Answer 1

你的javascript中有拼写错误。您正在尝试获取标识为textTotal的html元素，而您感兴趣的字段实际上是ID txtTotal。

修正错字，它会起作用。

Answer 2

var textTotal = document.getElementById('textTotal');

你的选择器错了。文本框的元素ID为txtTotal

所以以下内容应该有效：

var textTotal = document.getElementById('txtTotal');

Answer 3

这是您的jsFiddle的固定副本：http://jsfiddle.net/dcseekcw/

我修正了什么：

您传递了$以及您尝试添加为浮点数的值。从标题值中删除它们，并仅在计算总数后将其重新放入。
放入parseFloat，这样可以将值加在一起，而不是连接成字符串。
初始化了您的g_fTotal和chkExtras变量。
进行一些基本检查，以便radSize在未选择时不会引起问题。

Answer 4

您必须在“初始化”之后添加括号。

window.addEventListener('load', Init());

并且在CalculateTotal函数的末尾还有一个拼写错误。这是工作示例： http://jsfiddle.net/x6kjqbop/3/

添加表单Javascript的总计

4 个答案: