eventListener在重繪JS之前多次觸發-有解無憂

我正在為電子郵件表單制作一個簡單的提交按鈕，當點擊提交按鈕并且電子郵件有效時，它將按鈕的狀態從“訂閱”更改為取消訂閱并隱藏表單。到這里一切都很好，但問題是當我點擊提交按鈕時，它會做我需要的但在我輸入一個有效的電子郵件并改變按鈕的狀態后，相反的動作沒有完成，它繼續發送通過電子郵件發送到 localstorage，而不是將其洗掉。在這里，我添加了一個無效的電子郵件： eventListener 在重繪 JS 之前多次觸發在控制臺日志中，我有這封電子郵件。在這里，我添加了一個有效的電子郵件而不重繪頁面：

eventListener 在重繪 JS 之前多次觸發

現在，當我點擊取消訂閱時，它應該從 localStorage 中洗掉電子郵件并回傳表單和按鈕的狀態，但相反，它使提交操作..： eventListener 在重繪 JS 之前多次觸發

我該怎么辦？我是 JS 新手，在這里我只使用 vanilla js。

使用提交按鈕的代碼：

document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault()
console.log(inputForm.value)
localStorage.setItem('Email', inputForm.value)
subscribeEmail(inputForm.value);
 })

下面的代碼用于在重繪頁面時維護按鈕的狀態：

    const isSubscribed = localStorage.getItem('isSubscribed')
  if (isSubscribed === 'true') {
    subscribe()
    // document.querySelector('form').addEventListener('click', function (e) {
    //   e.preventDefault()
    //   unsubscribe()
    //   localStorage.removeItem('Email')
    // })
  } else {
    unsubscribe()
  }
}

下面是更改按鈕狀態的代碼：編輯：我修改了下面的代碼，現在我可以在不重繪頁面的情況下取消訂閱，現在的問題是我無法提交另一個值進行驗證并在 localStorage 中發送。

  import { validateEmail } from './email-validator.js'


export const subscribe = () => {
    const subscribeBtn = document.getElementById('subscribeButton')
    subscribeBtn.setAttribute('value', 'Unsubscribe')
    document.getElementById('emailForm').style.display = 'none'
    localStorage.setItem('isSubscribed', 'true')
}

export const unsubscribe = () => {
    const subscribeBtn = document.getElementById('subscribeButton')
    subscribeBtn.setAttribute('value', 'Subscribe')
    document.getElementById('emailForm').style.display = 'block'
    localStorage.setItem('isSubscribed', 'false')
}


export const subscribeEmail = (email) => {
    if (validateEmail(email) == true) {
        subscribe();
        document.querySelector('form').addEventListener('click', function (e) {
            e.preventDefault()
            unsubscribe()
            localStorage.removeItem('Email')
        })
    } else if (validateEmail == false) {
        unsubscribe();
    }
};

這是驗證功能：

const VALID_EMAIL_ENDINGS = ['gmail.com', 'outlook.com', 'yandex.ru']

export const validateEmail = (email) => {
  if (VALID_EMAIL_ENDINGS.some(v => email.includes(v))) {
  return true
  } else {
  return false
  }
}

export { VALID_EMAIL_ENDINGS as validEnding }

我不明白出了什么問題，或者這是否通常會發生..它讓我有機會在重繪頁面后“取消訂閱”，但我想在不需要重繪的情況下多次訂閱和取消訂閱。

我應該提到創建按鈕的部分是通過使用window.onload 顯示的，因此它是動態創建的。

編輯：

全段創建代碼：

import { subscribe, unsubscribe} from './subscribe.js'
import { subscribeEmail } from './subscribe.js'

const addSection = () => {
  const sectionFour = createElement('sectionFour', 'section', 'app-section app-section--image-program', 'fourth-section')
  const sectionParent = getElbyID('sectionParent', 'third-section')
  const parentSection = sectionParent.parentNode
  parentSection.insertBefore(sectionFour, sectionParent.nextSibling)

  const heading2 = createElement('heading2', 'h2', 'program-title')
  const heading2Text = document.createTextNode('Join Our Program')
  heading2.append(heading2Text)
  const parent = getElbyID('parent', 'fourth-section')

  const heading3 = createElement('heading3', 'h3', 'program-subtitle')
  const heading3Text = document.createTextNode('Sed do eiusmod tempor incididunt')
  heading3.appendChild(heading3Text)
  const linebreak = createElement('linebreak', 'br')
  heading3.appendChild(linebreak)
  const textAfterBreak = document.createTextNode('ut labore et dolore magna aliqua')
  heading3.appendChild(textAfterBreak)

  const form = createElement('submitFieldWrapper', 'form', 'submitFieldWrapper', 'form')
  parent.append(heading2, heading3, form)

  const emailForm = createElement('emailForm', 'div', 'form-wrapper', 'emailForm')

  const inputForm = createElement('inputForm', 'input', 'form-input', 'submit-info')
  setAttributes(inputForm,
    'type', 'text',
    'placeholder', 'Email')
  if (localStorage.getItem('Email') !== null) {
    inputForm.setAttribute('value', localStorage.getItem('Email'))
  } else {
    inputForm.setAttribute('placeholder', 'Email')
  }

  emailForm.appendChild(inputForm)

  document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault()
    console.log(inputForm.value)
    localStorage.setItem('Email', inputForm.value)
    subscribeEmail(inputForm.value);
  })

  const submitForm = createElement('submitForm', 'input', 'app-section__button submit-btn', 'subscribeButton')
  setAttributes(submitForm,
    'type', 'submit',
    'value', 'Subscribe')
  form.append(emailForm, submitForm)

  const isSubscribed = localStorage.getItem('isSubscribed')
  if (isSubscribed === 'true') {
    subscribe()
    // document.querySelector('form').addEventListener('click', function (e) {
    //   e.preventDefault()
    //   unsubscribe()
    //   localStorage.removeItem('Email')
    // })
  } else {
    unsubscribe()
  }
}

const createElement = (elName, htmlEl, elClass, elID) => {
  const elementName = document.createElement(htmlEl)
  elementName.className = elClass
  elementName.id = elID

  return elementName
}

const getElbyID = (elName, searchedId) => {
  const elementToSearch = document.getElementById(searchedId)

  return elementToSearch
}

const setAttributes = (elem, ...elemArguments) => {
  for (let i = 0; i < elemArguments.length; i  = 2) {
    elem.setAttribute(elemArguments[i], elemArguments[i   1])
  }
}

export const advancedSection = () => {
  addSection()
  const getHeading = document.getElementById('fourth-section')
  const sectionChildren = getHeading.children
  sectionChildren[0].innerHTML = 'Join Our Advanced Program'
  const getButton = document.getElementById('subscribeButton')
  setAttributes(getButton,
    'type', 'submit',
    'value', 'Subscribe to Advanced Program')
  getButton.className = 'app-section__button submit-btnAdvanced'
}

export default addSection

和 main.js

import addSection, { advancedSection } from './join-us-section.js'

class SectionCreator {
  constructor (type) {
    this.type = type
  }

  create (type) {
    if (type === 'standard') {
      addSection()
    } else if (type === 'advanced') {
      advancedSection()
    }
    return type
  }

  remove () {
    const sectionToRemove = document.getElementById('fourth-section')
    sectionToRemove.remove()
  }
}

window.onload = new SectionCreator().create('standard')

我設法在不重繪頁面的情況下取消訂閱，但現在的問題是，如果不重繪，我無法輸入另一個輸入..這就是我在不重繪的情況下取消訂閱的方法：

export const subscribeEmail = (email) => {
    if (validateEmail(email) == true) {
        subscribe();
        document.querySelector('form').addEventListener('click', function (e) {
            e.preventDefault()
            unsubscribe()
            localStorage.removeItem('Email')
        })
    } else if (validateEmail == false) {
        unsubscribe();
    }
};

此事件偵聽器在 isSubscribed 函式中，但我將其移至 subscribeEmail，在那里檢查驗證。上面的代碼最后可能會有所不同，因為我重命名了變數，從 unsubscribeToggle 到 isSubscribed，從 getUnsubscribe 到 subscribe，從 getSubscribe 到取消訂閱

uj5u.com熱心網友回復：

如果沒有看到您的所有代碼，很難在這里修改所有內容，而且 localStoage 在代碼段中不起作用。看看這個例子是否有幫助。它只使用一點代碼來管理訂閱和取消訂閱功能，而無需重繪頁面。

// init code
let hasSubscribed = false
let userEmail = ''
let subBtnEl, inputEl, resultEl

window.addEventListener('DOMContentLoaded', () => {
  // userEmail = localStorage.getItem('email') || '';;
  subBtnEl = document.querySelector('button#sub');
  inputEl = document.querySelector('input[name=email]');
  resultEl = document.querySelector('#result');
  subBtnEl.addEventListener('click', e => {
    resultEl.innerText = "";
    doButton()
  })
})

function isValidEmail(email) {
  return true;
}

function doButton() {
  // check localStorage
  hasSubscribed = userEmail.trim() !== '';
  if (!hasSubscribed) {
    if (!isValidEmail(inputEl.value)) {
      resultEl.innerText = "Invalid Email";
      return
    }
    userEmail = inputEl.value;
    inputEl.setAttribute('hidden', true);;
    subBtnEl.innerText = "Unsubscribe";
    resultEl.innerText = "You've been subscribed!";
    // localStorage.setItem('email', subBtnEl.value.trim());
  } else {
    // localStorage.setItem('email', '');
    userEmail = '';
    inputEl.removeAttribute('hidden');;
    resultEl.innerText = "You've been unsubscribed";
    subBtnEl.innerText = "Subscribe";
  }
}

<div id='result'></div>
<input type='text' name='email' />
<button id='sub'>Subscribe</button>

uj5u.com熱心網友回復：

我設法在不重繪的情況下取消訂閱：

export const subscribeEmail = (email) => {
    if (validateEmail(email) == true) {
        subscribe();
        document.querySelector('form').addEventListener('click', function (e) {
            e.preventDefault()
            unsubscribe()
            localStorage.removeItem('Email')
        })
    } else if (validateEmail == false) {
        unsubscribe();
    }
};

我只是玩了函式并把它們放在了地方。我解決了我無法訂閱和取消訂閱很多次的問題。
我應該在函式中洗掉 preventDefault 并使用 stopPropagation 進行更改：

export const subscribeEmail = (email) => {
  const isValidEmail = validateEmail(email)
  if (isValidEmail === true) {
    subscribe()
    document.querySelector('form').addEventListener('click', function (e) {
      unsubscribe()
      localStorage.removeItem('Email')
      e.stopPropagation()
    })
  } else if (isValidEmail === false) {
    unsubscribe()
  }
}

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

標籤：javascript dom 事件监听器

上一篇：取消訂閱按鈕后，表單的事件監聽器不起作用

下一篇：型別錯誤：無法讀取未定義的屬性（讀取“名字”）