Question

我不知道我做错了什么或代码断了，我试图在locationBox div中添加一个新div，但每次我点击按钮（绿色按钮表示输入）要添加新div，它会暂时添加div并消失，有人可以解释我做错了什么以及为什么代码会中断吗？谢谢

＆＃13;

var menuBtn = document.querySelector("#menuBtn button");
var sideMenu = document.querySelector(".sideMenu");
var addCity = document.querySelector("#addCityBtn");
var cityForm = document.querySelector("#cityForm");
var cityContainer = document.querySelector(".cities");
var formClose = document.querySelector("#cityForm p");
var enterBtn = document.querySelector("#enter");
var locationBox = document.querySelector(".locationBox");
var btn = document.querySelector("#btn");





/*=============================================
=            FUNCTIONS            =
=============================================*/


/*=====  OPEN MENU  ======*/

menuBtn.addEventListener("click", function() {
  menuBtn.style.marginLeft = "0px";
  if (sideMenu.style.marginLeft === "0px") {
    menuBtn.style.transition = "all .5s linear";
    sideMenu.style.marginLeft = "-320px";
    sideMenu.style.transition = "all .5s linear";
  } else {
    menuBtn.style.marginLeft = "320px";
    menuBtn.style.transition = "all .5s linear";
    sideMenu.style.marginLeft = "0px";
    sideMenu.style.transition = "all .5s linear";
  }

});


/*=====  ADD NEW DIV TO LOCATION BOX  ======*/


function newDiv() {
  var newDiv = document.createElement("div");
  newDiv.setAttribute("class", "city");
  locationBox.appendChild(newDiv);
}


/*=====  ADD NEW CITY  ======*/


function newCity() {
  if (cityForm.style.display === "block") {
    cityForm.style.transition = "all .7s  linear";
    cityForm.style.display = "none";
  } else {
    cityForm.style.transition = "all .7s  linear";
    cityForm.style.display = "block";
  }
}



/*=====  FORM CLOSE  ======*/
formClose.addEventListener("click", function() {
  cityForm.style.display = "none";
});






/*=============================================
=            EVENT LISTENERS            =
=============================================*/

addCity.addEventListener("click", newCity);
enterBtn.addEventListener("click", newDiv);

＆＃13;

body {
  padding: 0;
  margin: 0;
  background-color: blanchedalmond;
}

#menuBtn button {
  position: fixed;
  padding: 2px 0;
  width: 40px;
  background-color: black;
  z-index: 3;
  border-radius: 0px;
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

#menuBtn button:hover {
  color: black;
  background-color: white;
  transition: all .3s linear;
}

.sideMenu {
  height: 100vw;
  width: 320px;
  background-color: steelblue;
  position: absolute;
  z-index: 2;
  margin-left: -320px;
}

.sideMenu li {
  margin-left: 10px;
  list-style-type: none;
  border-bottom: 2px solid #0752a2;
  padding: 10px;
}

.sideMenu li:hover {
  background: white;
  transition: all .3s linear;
}

.sideMenu li:hover a {
  color: red;
  transition: all .3s linear;
}

.sideMenu li a {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

#topContainer {
  padding: 0;
  margin: 0;
  height: 280px;
  width: 100%;
  background-image: url("./images/sunnyBg.jpeg");
  background-size: cover;
  background-position: center;
  position: absolute;
}

#topContainer h2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -1%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 38px;
  text-transform: uppercase;
}


/*=============================================
=            LOCATION BOX RULES            =
=============================================*/

.locationBox {
  position: absolute;
  top: 40%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: .2fr 1fr;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 550px;
}

.locationBox h3 {
  color: blue;
  text-align: center;
  font-size: 28px;
}

.weatherDetails {
  color: #fffafa;
  text-align: left;
  margin: 0 10px;
  font-size: 17px;
  padding: 0;
  text-transform: uppercase;
}

.cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.city {
  width: 320px;
  height: 320px;
  background-color: cadetblue;
  border-bottom: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.city h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  border-bottom: 2px solid black;
  color: white;
  padding-bottom: 3px;
}

.cities form {
  display: none;
  height: 230px;
  width: 530px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #002fa7;
  border-radius: 10px;
  padding: 5px;
  color: white;
  font-size: 22px;
  letter-spacing: 2px;
  text-align: center;
  z-index: 4;
  transition: .7s all linear;
}

.cities label {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%);
}

.cities input {
  color: black;
  font-style: italic;
  font-weight: bolder;
  padding: 5px;
  display: block;
  margin: 90px auto;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.cities form button {
  width: 140px;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 3px;
  border: none;
  background-color: #ff007f;
  color: #ffffff;
  position: absolute;
  top: 70%;
  transform: translate(-50%);
}

.cities form button:hover {
  content: " ";
  border: none;
  background-color: #98ff98;
  color: #000000;
  transition: background-color .3s linear;
}

#cityForm p {
  position: absolute;
  top: 0;
  left: 90%;
  font-size: x-small;
  font-weight: bold;
  color: #fffafa;
  cursor: pointer;
}

#addCityBtn {
  width: 120px;
  padding: 5px;
  background: #23297a;
  border: 1.5px solid #000000;
  border-radius: 4.5px;
  font-size: 17px;
  color: #ffffff;
  cursor: pointer;
}

#addCityBtn:hover {
  color: #23297a;
  background-color: #fffafa;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Weather App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <link rel="icon" href="/Weather App/images/cloudy.png">

</head>

<body>
  <div id="menuBtn">
    <button>X</button>
  </div>
  <div class="sideMenu">
    <li>
      <a href="">Stuff One</a>
    </li>
    <li>
      <a href="">Stuff One</a>
    </li>
    <li>
      <a href="">Stuff One</a>
    </li>
    <li>
      <a href="">Stuff One</a>
    </li>
    <li>
      <a href="">Stuff One</a>
    </li>
    <li>
      <a href="">Stuff One</a>
    </li>
    <li>
      <a href="">Stuff One</a>
    </li>
  </div>
  <div id="topContainer">
    <h2>Weather</h2>
  </div>

  <div class="locationBox">
    <div class="location">
      <h3>LOCATIONS</h3>
    </div>

    <div class="cities">
      <form id="cityForm">
        <p>close</p>
        <label for="cityInput">City</label>
        <input type="text" id="cityInput" placeholder="Enter city">
        <button id="enter">Enter</button>
      </form>
      <div class="city">
        <h3>Copenhagen</h3>
        <div class="weatherDetails">
          <p>Current Weather:40 degrees</p>
          <p>Condition:Cloudy</p>
          <p>Wind:10mph</p>
          <p>Overcast:None</p>
        </div>
      </div>
      <div id="addCityContainer">
        <button id="addCityBtn">Add city</button>
      </div>
    </div>
  </div>



  <script src="main.js"></script>
</body>

</html>

＆＃13;

Answer 1

默认类型button为submit，导致提交表单。要解决此问题，请使用Event.preventDefault()或将按钮类型更改为button，如下所示：

<button type="button" id="addCityBtn">Add city</button>

附加元素未按预期工作

1 个答案: