Fatal编程技术网

Javascript-多表单显示问题

javascript forms

Javascript-多表单显示问题,javascript,forms,load,hide,Javascript,Forms,Load,Hide,所以我正在处理一个表单，当你点击它时，它会显示另一个表单，然后是另一个表单，等等 举个例子，这就是我到目前为止所做的： <head> <script langauge="javascript"> function showGeneral(){ document.getElementById('general').style.display="block"; document.getElementById('colors').style.display="n

所以我正在处理一个表单，当你点击它时，它会显示另一个表单，然后是另一个表单，等等

举个例子，这就是我到目前为止所做的：

<head>
<script langauge="javascript">
function showGeneral(){
    document.getElementById('general').style.display="block";
    document.getElementById('colors').style.display="none";
    document.getElementById('domain').style.display="none";
    document.getElementById('details').style.display="none"; 
}

function showColors(){
    document.getElementById('general').style.display="none";
    document.getElementById('colors').style.display="block";
    document.getElementById('domain').style.display="none";
    document.getElementById('details').style.display="none";  
}

function showDomain(){
    document.getElementById('general').style.display="none";
    document.getElementById('colors').style.display="none";
    document.getElementById('domain').style.display="block";
    document.getElementById('details').style.display="none"; 
}

function showDetails(){
    document.getElementById('general').style.display="none";
    document.getElementById('colors').style.display="none";
    document.getElementById('domain').style.display="none";
    document.getElementById('details').style.display="block"; 
}

</script> 
</head>

<body>
<div id="general" name="general">
<h1> General </h1>   
<form id="general" name="general">
    Name <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  Email <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showColors();"/> <br>
</form>
</div>



<div id="colors" name="colors" style="display:none">
<h1> Colors </h1>   
<form id="frm2" name="frm2">
    Green? <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
  Red? <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
  <input type="button" id="frm2btn1" name="frm2btn1" value="Continue" onclick="showDomain();"/> <br>
</form>
</div>


<div id="domain" name="domain">
<h1> Domain Name? </h1>   
<form id="frm1" name="frm1">
    Yes <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  No <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showDetails();"/> <br>
</form>
</div>

<div id="details" name="details">
<h1> Describe Your Order </h1>   
<form id="frm1" name="frm1">
    Img <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  kk <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="button" id="frm1btn1" name="frm1btn1" value="Finish" onclick="showGeneral();"/> <br>
</form>
</div>

</body>


函数showGeneral（）{
document.getElementById（'general'）.style.display=“block”；
document.getElementById（'colors'）.style.display=“无”；
document.getElementById（'domain'）.style.display=“无”；
document.getElementById（'details'）.style.display=“无”；
}
函数showColors（）{
document.getElementById（'general'）.style.display=“无”；
document.getElementById（'colors'）.style.display=“block”；
document.getElementById（'domain'）.style.display=“无”；
document.getElementById（'details'）.style.display=“无”；
}
函数showDomain（）{
document.getElementById（'general'）.style.display=“无”；
document.getElementById（'colors'）.style.display=“无”；
document.getElementById（'domain'）.style.display=“block”；
document.getElementById（'details'）.style.display=“无”；
}
函数showDetails（）{
document.getElementById（'general'）.style.display=“无”；
document.getElementById（'colors'）.style.display=“无”；
document.getElementById（'domain'）.style.display=“无”；
document.getElementById（'details'）.style.display=“block”；
}
一般的
名称

电子邮件



颜色
绿色

红色



域名？
是

否



请描述您的订单
Img

kk
这些函数工作正常-但问题是它在页面刷新/加载时显示所有表单。如何使加载该页面时只显示第一个页面

干杯

页面加载时，不会调用任何JS函数，因此不会处理任何JS函数，也不会显示所有表单。您需要向其中一个函数添加显式调用。因此，要仅显示第一个表单，您需要添加

showGeneral();
在脚本块中（例如，在showDetails（）函数之后）。

您需要将每个JS函数与事件绑定，以便在触发事件时调用该函数

根据我对您问题的理解，您需要有一个与表单的某个元素关联的onclick事件处理程序，以便在单击第一个元素时，它为第二个表单调用相应的函数，依此类推。另外，最初只需将第一个表单设置为可见（通过CSS）

谢谢你的回复，伙计。我有点搞不清楚应该在哪里以及如何输入：
showGeneral（）