Question

我已经创建了一个联系表单，该联系表单将在单击按钮时出现。这很好。但是，当我通过联系人表单中的按钮添加js代码以关闭联系人时，根本无法打开该联系人。

我认为这是逻辑问题，但是我找不到位置。语法似乎很好。

请注意，已使所有内容都变得无用的js代码已被注释掉。我已经在说明中添加了它，因此希望任何人都可以从中弄清楚故事来。同样，您必须单击窗口以使联系表单出现，因为CSS中的显示设置为“无”，并且在单击为“ flex”时会更改。

//this function will make the contact-form open upon clicking the "get a quote" Button
window.addEventListener('click', function() {
 let quoteButton = document.getElementById('quote-button');
 let contactWrapper = document.getElementById('contact-wrapper');
  
  if (contactWrapper.style.display == 'none') {
    contactWrapper.style.display = 'flex';
  } else {
    (contactWrapper.style.display = 'none');
  }
});

//this function shoud make the contact-form disappear upon clicking the "Back" Button, however above code (to make contact form appear) does not work if bellow code is enabled.

/*
window.addEventListener('click', function() {
  let backbutton = document.getElementById('back-button');
  let contactWrapper = document.getElementById('contact-wrapper');
 
    if (contactWrapper.style.display == 'flex') {
      contactWrapper.style.display = 'none';
    } 
});
*/


//this function will make the contact-form stick in place when opened
window.addEventListener('scroll', function() {
  let contactForm = document.getElementById('contact-wrapper');
  let maxTopYPosition = 0;
  let maxBottomYPosition = 4000;
  
  if (window.pageYOffset >= maxTopYPosition && window.pageYOffset < maxBottomYPosition) {
    contactForm.classList.add('sticky-contact-wrapper');
  } else {
    contactForm.classList.remove('sticky-contact-wrapper');
  }
});

/*   Beginning of Contact-Form
     The contact form is only visible on click*/
  #contact-wrapper {
  display: none;
  left: 5%;
  z-index: 10000;
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(to bottom right, rgba(122, 122, 122, 0.975), rgba(173, 173, 173, 0.975), rgba(235, 235, 235, 0.975), rgba(201, 201, 201, 0.975), rgba(122, 122, 122, 0.975));
  width: 90%;
  margin: 5vh auto;
  padding: 1vh 1vw;
  flex-direction: row;
  flex-wrap: wrap;
  border: 5px solid black;
  border-radius: 10px;
  box-shadow: 10px 10px rgb(206, 197, 197, 0.5); 
}

.sticky-contact-wrapper {
  position: absolute;
  position: fixed;
  top: 10vh;
  opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
  animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.flex-item {
  padding: 2vh 2vw;
}

.flex-item1 {
  flex-grow: 7;
}

.flex-item2 {
  flex-grow: 3;
  display: flex;
}

#contact-form p {
  line-height: 0;
  margin: 2vh 0 6px 0;
  font-size: 16px;
}

#contact-form .input-field {
  height: 5vh;
  width: 80%;
}

#contact-form .message-field{
  height: 12vh;
}

.button-flex-wrapper {
  display: flex;
  flex-direction: row;
  width: 80%;
  justify-content: space-between;
}

#contact-form button {
  display: block;
  height: 5vh;
  width: 10vw;
  min-width: 75px;
  color: white;
  background: rgb(173, 66, 66);
  border: none;
  border-radius: 5px; 
  text-transform: uppercase;
}

.dropZone {
  width: 33vw;
  height: 75%;
  margin: auto;
  border: 2px dashed #ccc;
  line-height: -50%;
  text-align: center;
  display: table;
}

.dropZone h3 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: rgb(235, 231, 231);
  height: 200px; width:200px;
  color: black;
}

.dropZone.dragover {
  border-color: black;
  color: #000;
}

/* End of contact form */

 <!--  CONTACT-FORM  -->
      <div id="contact-wrapper">
          <div class="flex-item flex-item1">
            <form id="contact-form" action="" method="POST" 
              enctype="multipart/form-data">
              <p>Name</p>
              <input class="input-field" type="text" placeholder="name">
              <p>Last Name</p>
              <input class="input-field" type="text" placeholder="name">
              <p>work email</p>
              <input class="input-field" type="text" placeholder="email">
              <p>phone</p>
              <input class="input-field" type="text" placeholder="phone">
              <p>message</p>
              <input class="input-field message-field" type="text">
              <br><br>
              <p>Submit your request</p>
              <br>
              <div class="button-flex-wrapper">
                <div>
                <button id="back-button" type="button">Back</button>
                </div>
                <div>
                <button id="submit-button" type="button">Submit</button>
                </div>
              </div>
          </div>
          <div id="uploads" class="flex-item flex-item2">
            <div class="dropZone" id="dropZone">
              <h3>Drop Files Here</h3>
            </div>
          </div>
        </div>

Answer 1

如前所述，问题在于事件处理程序正在侦听window对象中的任何类型的click事件。相反，我重构了代码并将相应的按钮放入变量中，并添加了addEventListener。

// contact-form opens upon clicking the "get a quote" Button

let quoteButton = document.getElementById('quote-button');

quoteButton.addEventListener('click', function() {
 let contactWrapper = document.getElementById('contact-wrapper');
  if (contactWrapper.style.display == 'none') {
    contactWrapper.style.display = 'flex';
  } else {
    (contactWrapper.style.display = 'none');
  }
});

//contact-form disapears when clicking "back" Button

let backbutton = document.getElementById('back-button');

backbutton.addEventListener('click', function() {
  let contactWrapper = document.getElementById('contact-wrapper');
    if (contactWrapper.style.display == 'flex') {
      contactWrapper.style.display = 'none';
    } 
});

Answer 2

您的JS现在只是在监听任何“点击”，这似乎是问题所在。您应该通过html将onclick处理程序添加到按钮上，并执行JS功能。

<button onclick="openContactForm()" id="quote-button">Open Contact</button>

我将您的代码转换为codepen，因此您和其他人可以将其检出并提供一些其他输入。我还为您进行了更改。

在Java脚本中添加代码后，弹出窗口无法打开

2 个答案: