如何使用JavaScript移除/洗掉HTML元素？-有解無憂

我正在創建一個警告段落，如果電子郵件不正確、為空或已發送，則會顯示錯誤。發生的情況是，在顯示第一個警告后，我想取消另一個警告的創建，這樣就不會堆積起來。

我正在嘗試的當前選項是如果警告已經存在則洗掉它，否則可以創建它。但我不知道為什么它沒有發生。

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>

uj5u.com熱心網友回復：

您將字串識別符號 'warning'與warning變數混淆：

let warning = document.createElement('p');

這是將變數設定warning為段落元素。

if (document.getElementById(warning) == null){

在這里，您將那個warning 變數傳遞給，它被設定為一個HTML 元素，getElementById所以它永遠不會找到它。

const error = getElementById(warning)
error.remove()

在這里你犯了同樣的錯誤。

通過一些調整，它會更好地作業：

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

uj5u.com熱心網友回復：

getElementById從“警告”呼叫document并使用基于字串的 ID，而不是對元素的參考，因為您對document.getElementById() 更正代碼的引數如下：

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');
    let warningId = 'warning';
    if (document.getElementById(warningId) == null) {
        warning.innerHTML = message;
        warning.classList.add('warning');
        warning.setAttribute('id', warningId);
        input.insertAdjacentElement('afterend',warning);
    }    
    else {
        const error = document.getElementById(warningId)
        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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426155.html

標籤：javascript 功能 dom 支配权

上一篇：如何從html表中獲取單元格值以在reactjs的axios請求中使用？

下一篇：誰來控制瀏覽器級別的縮放應該適用于所有跨平臺瀏覽器