我有一个小问题。Usign vanilla js 我创建了一个用于电子邮件输入的表单,在将验证函数发送到 localStorage 并且按钮的状态发生更改后;我做了一个事件监听器来取消订阅电子邮件,它从 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) => {
const isValidEmail = validateEmail(email)
if (isValidEmail === true) {
subscribe()
document.querySelector('form').addEventListener('click', function (e) {
e.preventDefault()
unsubscribe()
localStorage.removeItem('Email')
})
} else if (isValidEmail === false) {
unsubscribe()
}
}
验证函数:
const VALID_EMAIL_ENDINGS = ['gmail.com', 'outlook.com', 'yandex.ru']
export const validateEmail = (email) => VALID_EMAIL_ENDINGS.some(v => email.includes(v)) ? true : false
export { VALID_EMAIL_ENDINGS as validEnding }
以及节创建函数:
import { subscribe, unsubscribe, 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()
} else if (isSubscribed === 'false') {
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
我不明白我错在哪里或缺少什么,请帮忙。提前致谢。
最佳答案
当您单击“取消订阅”按钮时,您尚未为“订阅”事件重新分配事件处理程序。
添加
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault()
console.log(inputForm.value)
localStorage.setItem('Email', inputForm.value)
subscribeEmail(inputForm.value)
})
到 unsubcribe()
函数的末尾。
关于javascript - 取消订阅按钮后,表单的事件监听器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70244921/