Javascript - 多表单显示问题
因此，我正在开发一个表单，当您单击它时，它会弹出另一个表单，然后是另一个表单，等等。
例如，这就是我到目前为止所拥有的：
<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>
功能工作正常 - 但问题是它显示了所有页面刷新/加载时的表单。当您加载该页面时，如何使其仅显示第一个？
干杯!
So I'm working on a form that when you click it it brings up another form, then another, etc etc.
For the example, this is what I have so far:
<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>
The functions work fine - but the problem is it displays all the forms at on page refresh/load. How do I make it so just the first one displays when you load that page?
Cheers!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当页面加载时，不会调用任何 JS 函数，因此不会处理任何函数，并且会显示所有表单。您需要添加对其中一个函数的显式调用。因此，要显示第一个表单，您只需要
在脚本块中添加（例如在 showDetails() 函数之后）。
When the page loads there is no call to any of the JS functions so none of them are being processed and all your forms are displayed. You need to add an explicit call to one of the functions. So to display the first form only you'd need to add
In your script block (after the showDetails() function for example).
您需要将每个 JS 函数与一个事件联系起来，以便在触发事件时调用该函数。
根据我对您的问题的理解，您需要有一个与表单的某些元素关联的 onclick 事件处理程序 - 以便当单击第一个表单时，它会调用第二个表单的相应函数，依此类推。另外，最初只需将第一个表单设置为可见（通过 CSS）。
You need to tie up each of your JS functions with an event, so that the function is called when the event is triggered.
From what I understood of your question, you need to have an onclick event handler associated with some element of your form - so that when the first one is clicked, it calls the appropriate function for the second form and so on. Also, initially just set the first form to be visible (through your CSS).