Javascript 如何清除开关函数中的变量值?

Javascript 如何清除开关函数中的变量值?,javascript,switch-statement,Javascript,Switch Statement,我已经为学校的这个项目工作了好几个星期了,并且多次来到这里为我指出正确的方向,所以谢谢你。 这是我和我的导师正在努力解决的问题 我必须创建一个订单…是的,用户必须选择电脑机箱、显示器和打印机。图片必须出现在所选内容旁边,并且价格必须更新。如果所有内容都检查订单提交,如果不检查,您将收到一个要求填写表单的警报。您还可以选择重置或清除表单。除了清晰的功能外,其他功能都工作得很好。包括价格在内的所有字段都会重置,但仍保留单个值。如果我在所有部分上选择第一个选项,则总额为1000美元,清除后,总额字段显

我已经为学校的这个项目工作了好几个星期了,并且多次来到这里为我指出正确的方向,所以谢谢你。 这是我和我的导师正在努力解决的问题

我必须创建一个订单…是的,用户必须选择电脑机箱、显示器和打印机。图片必须出现在所选内容旁边,并且价格必须更新。如果所有内容都检查订单提交,如果不检查,您将收到一个要求填写表单的警报。您还可以选择重置或清除表单。除了清晰的功能外,其他功能都工作得很好。包括价格在内的所有字段都会重置,但仍保留单个值。如果我在所有部分上选择第一个选项,则总额为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>

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

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

由于代码在那里崩溃,对formPics11的调用永远不会执行,因此变量永远不会被清除。

就是这样。非常感谢你们,你们太棒了!