Question

我这个项目已经在学校工作了几个星期了，来过这里好几次让我回到正确的方向，所以谢谢你。这是我（和我的导师）正在努力解决的问题。

我必须创建一个订单表单（... yep），用户必须选择计算机机箱，显示器和打印机。图片必须出现在选择旁边，价格必须更新。如果所有内容都检查订单提交，如果没有，则会收到要求填写表单的提醒。您还可以选择重置或清除表单。除了清晰的功能外，一切都很美妙。所有字段都重置，包括价格，但个别值仍在保留。如果我在所有部分选择第一个选项，则总计为1000美元，在我清除之后，总字段显示为零。然后，如果我从组A中选择另一个选项，则值仍然与组B和C合计，就像没有清除任何内容一样。

希望我清楚地解释一下，这就是我所拥有的：

<html>
<head>
<script>
function doSubmit()
{
 if (validateText() == false)
  {
   alert("Please Complete Customer Information");
   return;
  }
 if (validateRadio() == false)
  {
   alert("Please Select a Case")
   return;
  }
 if (validateRadio1() == false)
  {
   alert("Please Select a Monitor")
   return;
  }
 if (validateRadio2() == false)
  {
   alert("Please Select a Printer")
   return;
  }
 alert("Order Accepted. Thank you.");
 return;
}

function validateText()
{
 var customer = document.Form4.customer.value;
 if (customer.length == 0) return false;
 var address1 = document.Form4.address1.value;
 if (address1.length == 0) return false;
 var city = document.Form4.city.value;
 if (city.length == 0) return false;
 var phone = document.Form4.phone.value;
 if (phone.length == 0) return false;
 var email = document.Form4.email.value;
 if (email.length == 0) return false;
 return true;
}

function validateRadio()
{
 if (document.Form1.case[0].checked) return true;
 if (document.Form1.case[1].checked) return true;
 if (document.Form1.case[2].checked) return true;
 return false;
}

function validateRadio1()
{
 if (document.Form2.screen[0].checked) return true;
 if (document.Form2.screen[1].checked) return true;
 if (document.Form2.screen[2].checked) return true;
 if (document.Form2.screen[3].checked) return true;
 return false;
}

function validateRadio2()
{
 if (document.Form3.printer[0].checked) return true;
 if (document.Form3.printer[1].checked) return true;
 if (document.Form3.printer[2].checked) return true;
 return false;
}

function doClear()
{
 document.Form4.systotal.value = "0.00";
 document.Form4.customer.value = "";
 document.Form4.address1.value = "";
 document.Form4.address2.value = "";
 document.Form4.city.value = "";
 document.Form4.state.value = "";
 document.Form4.zip.value = "";
 document.Form4.phone.value = "";
 document.Form4.email.value = "";

 document.Form1.case[0].checked = false;
 document.Form1.case[1].checked = false;
 document.Form1.case[2].checked = false;

 document.Form2.screen[0].checked = false;
 document.Form2.screen[1].checked = false;
 document.Form2.screen[2].checked = false;
 document.Form2.screen[3].checked = false;

 document.Form3.printer[0].checked = false;
 document.Form3.printer[1].checked = false;
 document.Form3.printer[2].checked = false;
 document.Form3.printer[3].checked = false;

 formPics(11);

 return;
}



var computerCase = 0;
var printer = 0;
var monitor = 0;
var total = 0;

function formPics(radios)
{ 
 switch(radios)
  {
   case 1:
    document.getElementById("pics").innerHTML = "<img src='C1_Game.jpg'>"; 
    computerCase = 600.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 2:
    document.getElementById("pics").innerHTML = "<img src='C2_Home.jpg'>";
    computerCase = 500.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 3:
    document.getElementById("pics").innerHTML = "<img src='C3_Mini.jpg'>";
    computerCase = 400.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 4:
    document.getElementById("pics2").innerHTML = "<img src='S1_27.jpg'>";
    monitor = 350.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 5:
    document.getElementById("pics2").innerHTML = "<img src='S2_19.jpg'>";
    monitor = 250.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 6:
    document.getElementById("pics2").innerHTML = "<img src='S3_17.jpg'>";
    monitor = 150.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 7:
    document.getElementById("pics2").innerHTML = "<img src='S4_Proj.jpg'>";
    monitor = 650.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 8:
    document.getElementById("pics3").innerHTML = "<img src='P1_Ink.jpg'>";
    printer = 50.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 9:
    document.getElementById("pics3").innerHTML = "<img src='P2_Laser.jpg'>";
    printer = 80.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 10:
    document.getElementById("pics3").innerHTML = "<img src='P3_Color.jpg'>";
    printer = 100.00;
    total = computerCase + printer + monitor;
    document.Form4.systotal.value = total;
    break;
   case 11:
    computerCase = 0;
    printer = 0;
    monitor = 0;
    total = 0;
    break;
  }
}

function totalclear()
{
if(printer > 0)
printer = 0;
return printer;
} 


</script>

<style>
table{ width:800px}
#pics{ float: right;}
#pics2{ float: right;}
#pics3{ float: right;}
</style>

</head>

<body>

<h1 align="center">New System Order Form</h1>

<table border="1" cellpadding="5" align="center">
<tr>
<td>
<form name="Form1" align="left"> 
 <h3>Choose a Case:</h3><div id='pics'></div>
  <input name="case" type="radio"  onClick='formPics(1)'>Gaming Behemoth ($600.00)<br/> 
  <input name="case" type="radio"  onClick='formPics(2)'>Basic Home Computing ($500.00)                <br/>
  <input name="case" type="radio"  onClick='formPics(3)'>Mini Entertainment Center     ($400.00)<br/>
</form>

<br/>

<form name="Form2"> 
 <h3>Choose a Monitor:</h3><div id='pics2'></div>
  <input name="screen" type="radio"  onClick='formPics(4)'>27" UHD LED ($350.00)<br/>
  <input name="screen" type="radio"  onClick='formPics(5)'>19"HD LCD ($250.00)<br/>
  <input name="screen" type="radio"  onClick='formPics(6)'>17"HD LCD ($150.00)<br/> 
  <input name="screen" type="radio"  onClick='formPics(7)'>HD Laser Projector ($650.00)    <br/>
</form>

<br/>

<form name="Form3"> 
 <h3>Choose a Printer:</h3><div id='pics3'></div>
  <input name="printer" type="radio"  onClick='formPics(8)'>Inkjet Printer ($50.00)      <br/>
  <input name="printer" type="radio"  onClick='formPics(9)'>Laser Printer ($80.00)<br/>
  <input name="printer" type="radio"  onClick='formPics(10)'>Color Laser Printer    ($100.00)<br/> 
</form>

</td>
<form name="Form4">
<td>
<h3 align="left">System Total: $ <input type="text" name="systotal" size="10" readonly     = "readonly" value = "0.00"  /></h3>

<hr style="width:100%" />
<h3 align="left">Customer Information:</h3>

  <b>Full Name:</b><br/>
  <input name="customer" size="45" type="text"><br/>
  <b>Address:</b><br/>
  <input name="address1" size="45" type="text"><br/>
  <input name="address2" size="45" type="text"><br/>
  <b>City, State, and Zip:</b><br/>
  <input name="city" size="15 type="text">
  &nbsp;&nbsp;<input name="state" size="2" type="text">
  &nbsp;&nbsp;<input name="zip" size="5" type="text"><br/>
 <b>Phone:</b><br/>
  <input name="phone" size="40" type="text"><br/>
 <b>Email:</b><br/>
  <input name="email" size="40" type="text"><br/>
</form>
<hr style="width:100%" />
<br/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" Value="Reset Order" onClick="doClear()">

</td>
</tr>
</table>
</body>
</html>

Answer 1

您只有三台打印机，但是您尝试清除四台打印机。函数doClear中的代码给出了以下错误消息：

TypeError: document.Form3.printer[3] is undefined

当代码崩溃时，永远不会执行对formPics(11)的调用，因此永远不会清除变量。

如何清除开关功能中保存的变量值？

1 个答案: