我正在为我的妻子做一个网络表单。她在一家保险机构工作，并希望一个基于网络的形式收集信息处理报价。一些背景-我将无法访问服务器为此，将需要打印在此表单中的所有详细信息，当用户完成输入信息。我希望用户能够在第一个div上选择不同的报价类型，然后通过每个相关的div(即，如果他们拥有自己的家，你不收集租房者报价的信息，你只是通过家庭报价)
当前，当你在quoteselectiondiv上并点击next时，它会将你跳转到最后一个div (autoquote)而不是第二个div (customerinfo)一旦你点击next，你也不能再回到quoteselectiondiv，除非重新加载页面。
我也遇到过这样的问题，触摸JS会使这两个函数都不起作用。
有人能帮我一下吗?我对JS相当陌生，但过去曾使用过c#，老实说，我已经有一段时间没有涉足HTML了。谷歌也没能帮我解决这个问题。请让我知道如果有任何额外的信息，你可能需要关于这篇文章/*eslint-env es6*/
function nextForm(){
//obtain different forms and store to local variable
var quoteselection = document.getElementById('quoteselection');
var customerinfo = document.getElementById('customerinfo');
var autoquote = document.getElementById('autoinsquote');
var nextBtn = document.getElementById('nextbtn');
var backBtn = document.getElementById('backbtn');
//Check which form currently on
if(quoteselection.style.display == 'block')
{
//show / hide different forms based on current location
alert('you are now going to customer info');
backBtn.style.display = 'block';
nextBtn.style.display = 'block';
quoteselection.style.display = 'none';
customerinfo.style.display = 'block';
autoquote.style.display = 'none';
}
else if(customerinfo.style.display == 'block')
{
backBtn.style.display = 'block';
nextBtn.style.display = 'block';
quoteselection.style.display = 'none';
customerinfo.style.display = 'block';
autoquote.style.display = 'none';
}
else(autoquote.style.display == 'block')
{
backBtn.style.display = 'block';
nextBtn.style.display = 'none';
quoteselection.style.display = 'none';
customerinfo.style.display = 'none';
autoquote.style.display = 'block';
}
}
function backForm() {
//obtain different forms and store to local variable
var quoteselection = document.getElementById('quoteselection');
var customerinfo = document.getElementById('customerinfo');
var autoquote = document.getElementById('autoinsquote');
var nextBtn = document.getElementById('nextbtn');
var backBtn = document.getElementById('backbtn');
//Check which form currently on
if(quoteselection.style.display == 'block')
{
//show / hide different forms based on current location
backBtn.style.display = 'none';
nextBtn.style.display = 'block';
quoteselection.style.display = 'block';
customerinfo.style.display = 'none';
autoquote.style.display = 'none';
}
else if(customerinfo.style.display == 'block')
{
backBtn.style.display = 'none';
nextBtn.style.display = 'block';
quoteselection.style.display = 'block';
customerinfo.style.display = 'none';
autoquote.style.display = 'none';
}
else(autoquote.style.display == 'block')
{
backBtn.style.display = 'block';
nextBtn.style.display = 'block';
quoteselection.style.display = 'none';
customerinfo.style.display = 'block';
autoquote.style.display = 'none';
}
}@charset "utf-8";
/* CSS Document */
body {
margin:auto;
width:50%;
padding:5px;
}
.quotetype {
text-align: center;
margin:10px;
padding:5px;
}
.quotetype input:button {
margin:50px;
}
.customerinfo {
}
#nextbtn {
display:block;
float:right;
}
#quoteselection {
display:block;
}
#customerinfo {
display:none;
}
#autoinsquote {
display:none;
}
#backbtn {
display:none;
float: left;
}<!DOCTYPE html>
<html>
<head>
<title>Interactive Quote Sheet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Welcome to our new Interactive Quote Sheet V1.0</h2>
<div id="quoteselection" class="quotetype">
<form class="quotetype">
<input type="checkbox" id="autoquote" name="autoquote" value="Auto">
<label for="autoquote">Auto</label>
<input type="checkbox" id="homequote" name="homequote" value="Home">
<label for="homequote">Home</label>
<input type="checkbox" id="rentquote" name="rentquote" value="Renters">
<label for="rentquote">Renters</label><br><br>
</form>
</div>
<div id="customerinfo">
<form class="customerinfo">
<label for="firstName">First Name</label><br>
<input type="text" id="firstName" name="firstName" value="First Name"><br>
<label for="lastName">Last Name</label><br>
<input type="text" id="lastName" name = "lastName" value="Last Name"><br>
<label for="dob">Date of Birth</label><br>
<input type="date" id="dob" name="dob"><br>
<label for="streetadd">Street Address</label><br>
<input type="text" id="streetadd" name = "streetadd"><br>
<label for="city">City</label><br>
<input type="text" id="city" name="city"><br>
<label for="state">State</label><br>
<input type="text" id="state" name="state"><br>
<label for="zip">Zip Code</label><br>
<input type="text" id="zip" name="zip"><br>
<br>
<label for="driverslicense">Drivers License Number</label>
<input type="text" id="driverslicense" name="driverslicense">
<label for="dlstate">State</label>
<input type="text" id="dlstate" name="dlstate" value="MO"><br>
<label for="social">Social Security Number</label><br>
<input type="text" id="social" name="social" value="XXX-XX-XXXX">
<br>
<label for="phone">Phone Number</label><br>
<input type="tel" id="phone" name="phone" value="XXX-XXX-XXXX"><br>
<label for="email">Email Address</label><br>
<input type="email" id="email" name="email" value="john.smith@email.com"><br>
<p>Do you own or rent your residence?</p>
<label for="own">Own</label>
<input type="radio" id="own" name="own" value="own">
<label for="rent">Rent</label>
<input type="radio" id="rent" name="rent" value="rent"><br>
<label for="autopay">Autopay</label>
<input type="checkbox" id="autopay" name="autopay"><br>
<label for="paperless">Paperless</label>
<input type="checkbox" id="paperless" name="paperless"><br>
</form>
</div>
<div id="autoinsquote">
<form class="autoquote">
<p>Let's gather some information about your current policy</p>
<p>Is the garaging address the same as the address provided previously?</p>
<label for="addsameyes">Yes</label>
<input type="radio" name="addsameyes" id="addsameyes">
<label for="addsameno">No</label>
<input type="radio" name="addsameno" id="addsameno"><br>
<label for="people">How many people are in the household?</label><br>
<input type="number" id="people" name="people" value="2"><br>
</form>
</div>
<button id="backbtn" name="back" onclick="backForm()">Back</button>
<button id="nextbtn" name="next" onclick="nextForm()">Next</button>
<script type ="text/javascript" src="java.js"></script>
</body>
</html>使用...style.display == "block"将只检查内联样式。如果你有一个外部样式表，你可以这样做:
/*eslint-env es6*/
function nextForm(){
//obtain different forms and store to local variable
var quoteselection = document.getElementById('quoteselection');
var customerinfo = document.getElementById('customerinfo');
var autoquote = document.getElementById('autoinsquote');
var nextBtn = document.getElementById('nextbtn');
var backBtn = document.getElementById('backbtn');
//Check which form currently on
if(window.getComputedStyle(quoteselection).display == 'block')
{
//show / hide different forms based on current location
alert('you are now going to customer info');
backBtn.style.display = 'block';
nextBtn.style.display = 'block';
quoteselection.style.display = 'none';
customerinfo.style.display = 'block';
autoquote.style.display = 'none';
}
else if(window.getComputedStyle(customerinfo).display == 'block')
{
backBtn.style.display = 'block';
nextBtn.style.display = 'block';
quoteselection.style.display = 'none';
customerinfo.style.display = 'block';
autoquote.style.display = 'none';
}
else(window.getComputedStyle(autoquote).display == 'block')
{
backBtn.style.display = 'block';
nextBtn.style.display = 'none';
quoteselection.style.display = 'none';
customerinfo.style.display = 'none';
autoquote.style.display = 'block';
}
}
function backForm() {
//obtain different forms and store to local variable
var quoteselection = document.getElementById('quoteselection');
var customerinfo = document.getElementById('customerinfo');
var autoquote = document.getElementById('autoinsquote');
var nextBtn = document.getElementById('nextbtn');
var backBtn = document.getElementById('backbtn');
//Check which form currently on
if(window.getComputedStyle(quoteselection).display == 'block')
{
//show / hide different forms based on current location
backBtn.style.display = 'none';
nextBtn.style.display = 'block';
quoteselection.style.display = 'block';
customerinfo.style.display = 'none';
autoquote.style.display = 'none';
}
else if(window.getComputedStyle(customerinfo).display == 'block')
{
backBtn.style.display = 'none';
nextBtn.style.display = 'block';
quoteselection.style.display = 'block';
customerinfo.style.display = 'none';
autoquote.style.display = 'none';
}
else(window.getComputedStyle(autoquote).display == 'block')
{
backBtn.style.display = 'block';
nextBtn.style.display = 'block';
quoteselection.style.display = 'none';
customerinfo.style.display = 'block';
autoquote.style.display = 'none';
}
}