Appending element not working as expected

Question

I don't know what i am doing wrong or where the code is breaking,i am trying to append a new div into the locationBox div,but every time i click on the button(green button that says enter) to add the new div,it momentarily adds the div and it disappears,can someone explain what i'm doing wrong and why the code breaks?Thanks

 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); 

 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; } 

 <!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> 

Answer 1

The default type of button is submit which causes the submission of the form. To solve the issue either use Event.preventDefault() or change the type of the button to button like the following:

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