I'm creating a warning paragraph that shows an error if the email is incorrect, is empty, or if it was sent. And what happens is that after showing the first warning, I want to cancel the creation of another one, so that doesn't pile up.
The current option I'm trying is to remove the warning if it already exists, otherwise, it can be created. But I don't know why it's not happening.
JS:
const input = document.querySelector('#emailInput');
const form = document.querySelector('#myForm')
const button = document.querySelector('#notify')
const validRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
form.addEventListener('submit', function (e){
e.preventDefault()
});
button.addEventListener('click', validateEmail)
function validateEmail(){
let inputValue = input.value;
if(inputValue.match(validRegex)){
createWarning('Email sent!')
}
else if(inputValue == ''){
createWarning('Please provide an email!');
}
else{
createWarning('Please provid a valid email address')
}
}
function createWarning(message){
let warning = document.createElement('p');
if (document.getElementById(warning) == null){
warning.innerHTML = message;
warning.classList.add('warning');
warning.setAttribute('id','warning');
input.insertAdjacentElement('afterend',warning);
}
else{
const error = getElementById(warning)
error.remove()
}
}@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: whitesmoke;
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
display: flex;
flex-direction: column;
align-content: space-between;
height: 100vh;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100%;
}
.title{
display: flex;
align-items: center;
justify-content: center;
}
.company-name{
font-family: 'Libre Franklin', sans-serif;
font-weight: 700;
font-size: 20px;
}
.dot{
color: hsl(223, 87%, 63%);
}
.intro{
display: flex;
flex-direction: column;
align-items: center;
align-content: space-between;
gap: 15px;
justify-content: space-between;
}
.subtitle h2{
font-weight: 600;
font-size: 20px;
}
.launching{
color: rgba(190, 160, 83, 0.602);
font-weight: 200;
}
.paragraph p{
font-weight: 300;
font-size: 14px;
color: rgb(41, 37, 0);
}
form{
display: flex;
align-items: center;
align-content: space-between;
flex-direction: column;
}
#emailInput{
border-radius: 50px;
border: 1px solid hsl(223, 100%, 88%);
width: 100%;
padding: 10px 35px;
font-family: 'Libre Franklin', sans-serif;
}
.warning{
color: hsl(354, 100%, 66%);
font-size: small;
font-family: 'Libre Franklin', sans-serif;
margin: 5px;
}
#emailInput:focus{
outline: none;
}
#notify{
background-color: hsl(223, 87%, 63%);
color: whitesmoke;
border-radius: 50px;
padding: 10px 20px;
width: 100%;
border: 1px solid rgba(88, 78, 78, 0);
font-weight: bold;
margin-top: 15px;
}
.social-media{
width: 200px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-content: space-between;
justify-items: center;
}
.around{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid hsla(0, 0%, 59%, 0.192);
border-radius: 50%;
width: 30px;
height: 30px;
}
.fab{
color: hsl(223, 87%, 63%);
font-size: medium;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b5c693247f.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Ping coming soon page</title>
</head>
<body>
<div class="container">
<div class="title">
<h1 class="company-name">PING<span class="dot">.</span></h1>
</div>
<div class="intro">
<div class="subtitle"><h2><span class="launching">We are launching</span> soon!</h2></div>
<div class="paragraph"><p>Subscribe and get notified</p></div>
<div class="form-container">
<form id="myForm" name="myForm">
<input type="email" id="emailInput" name="emailInput" placeholder="Your email address...">
<button type="submit" id="notify">Notify Me</button>
</form>
</div>
</div>
<div class="img-container">
<img src="images/illustration-dashboard.png" alt="Dashboard Image" width="300" height="250">
</div>
<div class="social-media">
<div class="around"><i class="fab fa-facebook-f"></i></div>
<div class="around"><i class="fab fa-twitter"></i></div>
<div class="around"><i class="fab fa-instagram"></i></div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://github.com/HBortolim">Henrique Bortolim</a>.
</p>
</footer>
<script src="app.js"></script>
</body>
</html>You're confusing the string identifier 'warning' with a warning variable:
let warning = document.createElement('p');
This is setting the variable warning to a paragraph element.
if (document.getElementById(warning) == null){
Here you're passing that warning variable, which is set to an HTML element to getElementById, so it's never going to find it.
const error = getElementById(warning)
error.remove()
Here you're making that same mistake.
With some adjustments it'll work a bit better:
function createWarning(message){
const existingWarning = document.getElementById('warning');
if (existingWarning) {
existingWarning.remove();
}
const warning = document.createElement('p');
warning.innerHTML = message;
warning.classList.add('warning');
warning.setAttribute('id','warning');
input.insertAdjacentElement('afterend',warning);
}