因此我在页脚中有一个表单，我想在用户提交信息时显示一个对话框。在执行此操作之前，我想防止页面刷新，因此我添加了e.preventDefault，然后想确保在用户提交之前填写了所有输入。所以我在所有输入中添加了required。然后，我添加了代码以显示一个隐藏的对话框dialog.style.display = 'block';，但是这样做可以使用户无需输入任何信息即可提交。因此，我将提交按钮上的事件从submit.addEventListener('click', (e) => {更改为submit.addEventListener('submit', (e) => {，这解决了required问题，但是现在当我点击Submit时，我无法查看对话框和{{1} }不起作用？
e.preventDefault();const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links div'));
const header = document.querySelector('header');
const submit = document.querySelector('#submit');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < linksArray.length; i++) {
linksArray[i].addEventListener('click', shuffle);
}
function changeColor() {
let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexColor = '#';
for(let i = 0; i < 6; i++) {
let random = Math.floor(Math.random()*hexArray.length);
hexColor += hexArray[random];
}
header.style.backgroundImage = 'none';
header.style.backgroundColor = hexColor;
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function shuffle() { // Fisher-Yates shuffle algorithm
for (let i = linksArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML];
}
}
submit.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('.name').value;
const address = document.querySelector('.address').value;
const city = document.querySelector('.city').value;
const dialog = document.querySelector('.dialog-wrap');
const close = document.querySelector('.close');
dialog.style.display = 'block';
document.querySelector('.dialog-name').innerHTML = name;
document.querySelector('.dialog-address').innerHTML = address;
document.querySelector('.dialog-city').innerHTML = city;
close.onclick = () => {
dialog.style.display = 'none';
document.querySelector("form").reset();
}
})html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
* {
outline: 1px solid red;
}
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
box-shadow: 0px 0px 70px rgb(99, 99, 99, 0.5);
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
background-position: center;
background-size: cover;
padding-top: 7%;
padding-bottom: 25%;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 423px;
background-color: rgba(0,0,0,0.6);
padding: 35px;
margin-left: 10%;
}
header p {
margin: 0;
padding: 0;
}
header p:first-child {
margin-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
background-color: #fff;
}
.col {
flex-basis: 33.33%;
padding: 50px 0 40px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 15%;
font-size: 1.5rem;
}
.links div {
margin:2px 0;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
margin-top: 30PX;
color: #fff;
}
.links {
font-size: 1.2rem;
display: flex;
flex-direction: column;
}
.form-wrap {
padding-top: 30px;
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 100px 0 0;
display: flex;
flex-direction: column;
width: 100%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
.dialog-wrap {
background-color: rgba(0,0,0,0.7);
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1000;
display: none;
}
dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 220px;
border: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
dialog div {
font-size: 1.4rem;
color: #fff;
margin: 10px 0;
outline: 1px solid #63889b;
}
dialog div:first-child {
margin-top: 0px;
}
dialog .label {
background-color: #63889b;
padding: 7px;
display: inline-block;
width: 30%;
margin: 0;
text-align: center;
}
dialog .info {
display: inline-block;
padding-left: 5px;
color: #000;
}
dialog button {
border: none;
width: 100%;
margin: auto auto 16px auto;
padding: 7px;
}
dialog button:hover {
cursor: pointer;
transition: all .3s ease;
background-color: #0675ad;
}
dialog div:last-child {
outline: none;
}
@media screen and (max-width: 1600px) {
.header-info {
font-size: 1.4rem;
width: 392px;
margin-left: 7%;
}
}
@media screen and (max-width: 1400px) {
.col p, .links {
font-size: 1.1rem;
}
}
@media screen and (max-width: 1200px) {
nav {
font-size: 1.5rem;
}
.header-info {
font-size: 1.3rem;
width: 363px;
}
.col-1 img {
width: 270px;
height: 132px;
}
.col-2 img {
width: 280px;
height: 107px;
}
.col-3 img {
width: 250px;
height: 140px;
}
.col p, .links, label {
font-size: 1rem;
}
}
@media screen and (max-width: 1000px) {
.col p {
width: 85%;
}
.col-1 img {
width: 230px;
height: 112px;
}
.col-2 img {
width: 220px;
height: 82px;
}
.col-3 img {
width: 210px;
height: 120px;
}
}
@media screen and (max-width: 900px) {
.header-info {
font-size: 1.1rem;
}
}
答案 0 :(得分：2)
尝试将事件侦听器添加到表单而不是提交按钮。
HTML
<form id="form">...</form>
JS：
const form = document.querySelector('#form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('.name').value;
const address = document.querySelector('.address').value;
const city = document.querySelector('.city').value;
const dialog = document.querySelector('.dialog-wrap');
const close = document.querySelector('.close');
dialog.style.display = 'block';
document.querySelector('.dialog-name').innerHTML = name;
document.querySelector('.dialog-address').innerHTML = address;
document.querySelector('.dialog-city').innerHTML = city;
close.onclick = () => {
dialog.style.display = 'none';
form.reset();
}
})