js code runs and then refreshes quickly i cannot notice the changes more than a second after running the code

https://github.com/Ahmedalzarka/pod-request-access-landing-page:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let requestBtn = document.getElementById("requestbtn")
let oops = document.querySelector(".oops")
requestBtn.addEventListener("click", () => {
let emailInput = document.getElementById("email").value
emailInput == "" ? oops.classList.remove("hidden") : null
})

<!-- language: lang-css -->

:root {
font-size: 10px;
--font-heading: 5.2em;
--font-paragraph: 18px;
--green-color: #54E6AF;
--form-color: #2C344B;
--background-navy-blue-color: #121725;
--white: #ffffff;
--form-hover-color: #5A668A;
--grey-color: #C2CBE5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Chivo', sans-serif;
font-size: 100%;
}
body {
position: relative;
width: 100%;
height: 100vh;
padding-bottom: 130px;
background-color: var(--background-navy-blue-color);
}
body::before {
width: 100%;
min-height: 100vh;
position: absolute;
content: '';
background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/desktop/image-host.jpg);
background-repeat: no-repeat;
background-position: right bottom 10%, right center;
}
body::after {
width: 100%;
min-height: 100vh;
position: absolute;
content: '';
background-image: url(../assets/desktop/logo.svg);
background-repeat: no-repeat;
background-position: left 20% top 10%;
}
main {
z-index: 1;
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-40%);
max-width: fit-content;
padding: 90px 60px 0 0;
background-color: var(--background-navy-blue-color);
}
.container {
display: flex;
flex-direction: column;
}
main h1 {
font-size: 5.2em;
font-weight: 400;
line-height: 62px;
text-transform: uppercase;
color: var(--green-color);
}
main h1 span {
color: var(--grey-color);
}
main p {
max-width: 445px;
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--grey-color);
opacity: 0.5;
margin-top: 24px;
}
form {
margin-top: 40px;
position: relative;
width: 430px;
}
input {
width: 100%;
padding: 20px 0 20px 32px;
background-color: var(--form-color);
border: none;
outline: none;
border-radius: 1000px;
font-size: 14px;
font-weight: 400;
color: white;
}
input::placeholder {
color: white;
font-size: 14px;
font-weight: 400;
}
button {
color: black;
height: 80%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 8px;
padding: 10px 28px;
border-radius: 1000px;
border: none;
cursor: pointer;
background-color: var(--green-color);
font-size: 14px;
font-weight: 400;
}
button:hover {
background-color: #B3FFE2;
}
.img-contianer {
margin-top: 42px;
display: flex;
gap: 40px;
}
.img-contianer img {
object-fit: contain;
}
.oops {
color: #FB3E3E;
opacity: 1;
margin: 0;
}
.hidden {
opacity: 0;
}
@media (max-width: 1250px) {
body::after {
background-size: 200px;
background-position: left 40px top 50px;
}
body::before {
background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/tablet/image-host.jpg);
background-position: left 5% bottom, right top;
}
main {
left: 0;
}
main h1 {
font-size: 48px;
}
}
@media (max-width: 800px) {
body::after {
background-position: center top 10%;
opacity: 1;
}
body::before {
background-image: url(../assets/mobile/image-host.jpg);
background-position: top center;
background-size: cover;
backface-visibility: hidden;
opacity: 0.1;
}
main {
width: 100%;
max-width: 100%;
padding: 0 24px;
background-color: transparent;
bottom: 0;
}
main h1 {
text-align: center;
}
main p {
text-align: center;
}
.container {
align-items: center;
}
.img-contianer {
order: 2;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
opacity: 0.8;
margin-top: 30px;
}
form {
order: 3;
}
button {
width: 100%;
position: static;
padding: 20px 0;
margin-top: 16px;
transform: translate(0, 0);
}
}

<!-- language: lang-html -->

<main>
<h1>Publish your podcasts<br><span>everywhere</span>.</h1>
<div class="container">
<p>Upload your audio to Pod with a single click. We’ll then distribute your podcast to Spotify, Apple Podcasts, Google Podcasts, Pocket Casts and more!</p>
<form>
<input type="email" placeholder="Email address" id="email">
<button id="requestbtn">Request Access</button>
</form>
<p class="oops hidden">Oops! Please check your email</p>
<div class="img-contianer">
<img src="assets/desktop/spotify.svg" alt="spotify">
<img src="assets/desktop/apple-podcast.svg" alt="apple-podcast">
<img src="assets/desktop/google-podcasts.svg" alt="google">
<img src="assets/desktop/pocket-casts.svg" alt="pocket">
</div>
</div>
</main>

<!-- end snippet -->

The hidden message "oops....." shows and hides in the same second.

I don't know what to do.

1. The button missing the type attribute won't know to submit the form when button is clicked.

<button type="submit" id="requestbtn">Request Access</button>

2. To account for button pressed or user pressing enter on the email field, suggestion to add event listener to form.

3. To prevent form submission on error, use event.preventDefault()

const requestAccessForm = document.getElementById("requestAccessForm");
let requestBtn = document.getElementById("requestbtn");
let oops = document.querySelector(".oops")


requestAccessForm.addEventListener("submit", (event) => {
  let emailInput = document.getElementById("email");
  
  if (emailInput.value === "") {
    oops.classList.remove("hidden");
    
    console.log("invalid email");
    // Will prevent form from submitting
    event.preventDefault();
    
  } else {
    // else statement just for testing
    console.log("form will submit");
  }
});

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const requestAccessForm = document.getElementById("requestAccessForm");
let requestBtn = document.getElementById("requestbtn");
let oops = document.querySelector(".oops")
requestAccessForm.addEventListener("submit", (event) => {
let emailInput = document.getElementById("email");
if (emailInput.value === "") {
oops.classList.remove("hidden");
console.log("invalid email");
// Will prevent form from submitting
event.preventDefault();
} else {
// else statement just for testing
console.log("form will submit");
}
});

<!-- language: lang-css -->

:root {
font-size: 10px;
--font-heading: 5.2em;
--font-paragraph: 18px;
--green-color: #54E6AF;
--form-color: #2C344B;
--background-navy-blue-color: #121725;
--white: #ffffff;
--form-hover-color: #5A668A;
--grey-color: #C2CBE5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Chivo', sans-serif;
font-size: 100%;
}
body {
position: relative;
width: 100%;
height: 100vh;
padding-bottom: 130px;
background-color: var(--background-navy-blue-color);
}
body::before {
width: 100%;
min-height: 100vh;
position: absolute;
content: '';
background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/desktop/image-host.jpg);
background-repeat: no-repeat;
background-position: right bottom 10%, right center;
}
body::after {
width: 100%;
min-height: 100vh;
position: absolute;
content: '';
background-image: url(../assets/desktop/logo.svg);
background-repeat: no-repeat;
background-position: left 20% top 10%;
}
main {
z-index: 1;
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-40%);
max-width: fit-content;
padding: 90px 60px 0 0;
background-color: var(--background-navy-blue-color);
}
.container {
display: flex;
flex-direction: column;
}
main h1 {
font-size: 5.2em;
font-weight: 400;
line-height: 62px;
text-transform: uppercase;
color: var(--green-color);
}
main h1 span {
color: var(--grey-color);
}
main p {
max-width: 445px;
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--grey-color);
opacity: 0.5;
margin-top: 24px;
}
form {
margin-top: 40px;
position: relative;
width: 430px;
}
input {
width: 100%;
padding: 20px 0 20px 32px;
background-color: var(--form-color);
border: none;
outline: none;
border-radius: 1000px;
font-size: 14px;
font-weight: 400;
color: white;
}
input::placeholder {
color: white;
font-size: 14px;
font-weight: 400;
}
button {
color: black;
height: 80%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 8px;
padding: 10px 28px;
border-radius: 1000px;
border: none;
cursor: pointer;
background-color: var(--green-color);
font-size: 14px;
font-weight: 400;
}
button:hover {
background-color: #B3FFE2;
}
.img-contianer {
margin-top: 42px;
display: flex;
gap: 40px;
}
.img-contianer img {
object-fit: contain;
}
.oops {
color: #FB3E3E;
opacity: 1;
margin: 0;
}
.hidden {
opacity: 0;
}
@media (max-width: 1250px) {
body::after {
background-size: 200px;
background-position: left 40px top 50px;
}
body::before {
background-image: url(../assets/desktop/bg-pattern-dots.svg), url(../assets/tablet/image-host.jpg);
background-position: left 5% bottom, right top;
}
main {
left: 0;
}
main h1 {
font-size: 48px;
}
}
@media (max-width: 800px) {
body::after {
background-position: center top 10%;
opacity: 1;
}
body::before {
background-image: url(../assets/mobile/image-host.jpg);
background-position: top center;
background-size: cover;
backface-visibility: hidden;
opacity: 0.1;
}
main {
width: 100%;
max-width: 100%;
padding: 0 24px;
background-color: transparent;
bottom: 0;
}
main h1 {
text-align: center;
}
main p {
text-align: center;
}
.container {
align-items: center;
}
.img-contianer {
order: 2;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
opacity: 0.8;
margin-top: 30px;
}
form {
order: 3;
}
button {
width: 100%;
position: static;
padding: 20px 0;
margin-top: 16px;
transform: translate(0, 0);
}
}

<!-- language: lang-html -->

<main>
<h1>Publish your podcasts<br><span>everywhere</span>.</h1>
<div class="container">
<p>Upload your audio to Pod with a single click. We’ll then distribute your podcast to Spotify, Apple Podcasts, Google Podcasts, Pocket Casts and more!</p>
<form id="requestAccessForm">
<input type="email" placeholder="Email address" id="email">
<button type="submit" id="requestbtn">Request Access</button>
</form>
<p class="oops hidden">Oops! Please check your email</p>
<div class="img-contianer">
<img src="assets/desktop/spotify.svg" alt="spotify">
<img src="assets/desktop/apple-podcast.svg" alt="apple-podcast">
<img src="assets/desktop/google-podcasts.svg" alt="google">
<img src="assets/desktop/pocket-casts.svg" alt="pocket">
</div>
</div>
</main>

<!-- end snippet -->

When you are using a form tag, u need to be careful to the buttons, cause by default in a form they are type="submit", and this cause the page to refresh every time they are clicked.

To fix the problem just specify the button type like so:

<button type="button" id="requestbtn">Request Access</button>

Hope it helps

As Edoardo Balducci mentions, buttons are type="submit" by default. This means, clicking the button will try to submit its associated form.

Since the input field is not required, it is optional. Because it is the form's only form control, the form is always valid and will always submit when requested (here: clicking the button).

To prevent submission, try (one of) the following:

• Make the input field required.
• Conditionally prevent the click from submitting the form (by calling event.preventDefault()).
• Change the button to type="button", and conditionally submit the form manually (e.g. by calling form.requestSubmit())

As Arty.Simon mentions, it would be better to listen to a submit event on the form. This better conveys intent and also handles form submission requests originating from elsewhere than the button.