求助：页面跳转后Javascript无法向HTML的div追加抽认卡元素

核心问题诊断 #

1. 页面跳转逻辑冲突：createset按钮内的<a>标签会直接触发页面跳转，导致createSet函数的代码可能未完全执行就离开当前页面。
2. localStorage数据未正确解析：读取terms时直接使用JSON字符串的length，而非解析后数组的长度，导致循环次数错误。
3. DOM操作时机错误：在createset.html的点击事件中监听DOMContentLoaded，但该事件只会在当前页面加载时触发，跳转后的setpage.html无法执行这段逻辑。
4. 元素获取与组装问题：flashcardContainer在createset.html中不存在，导致后续追加元素失败；importSets函数未完整组装卡片DOM结构，且传入的是索引而非实际抽认卡内容。

分步修正方案 #

1. 修正createset.html的按钮跳转逻辑 #

移除按钮内的<a>标签，通过JavaScript控制页面跳转，确保createSet函数执行完毕后再跳转：

<!-- 原代码 -->
<button id="createset"><a href="setpage.html">Create Set</a></button>

<!-- 修改后 -->
<button id="createset">Create Set</button>

2. 重构createset.js的核心逻辑 #

• 移除createSet函数内的DOMContentLoaded监听，将页面加载时读取localStorage并生成卡片的逻辑单独拆分，放在setpage.html加载时执行。
• 确保localStorage数据正确解析为数组。
• 修正importSets函数，传入实际的term和definition，完整组装卡片结构：

const submit = document.getElementById('createset')
const addTerm = document.getElementById('addterm')
const termDiv = document.getElementById('t-d')
var termNums = 1

// 仅在createset.html页面绑定事件
if (submit) {
    submit.addEventListener("click", createSet)
}
if (addTerm) {
    addTerm.addEventListener("click", addTD)
}

function createSet() {
    // 收集terms数组，过滤空内容
    var terms = document.querySelectorAll('.term')
    let termsArr = Array.prototype.map.call(terms, function(e) {
        return e.value.trim()
    }).filter(item => item)

    // 收集definitions数组，过滤空内容
    var defs = document.querySelectorAll('.definition')
    let defsArr = Array.prototype.map.call(defs, function(e) {
        return e.value.trim()
    }).filter(item => item)

    // 存储到localStorage
    localStorage.setItem("terms", JSON.stringify(termsArr))
    localStorage.setItem("definitions", JSON.stringify(defsArr))

    // 执行页面跳转
    window.location.href = "setpage.html"
}

function addTD() {
    termNums += 1
    var tempDiv = document.createElement('div')
    tempDiv.setAttribute('class', 'individualTerm')
    
    var term = document.createElement('input')
    term.setAttribute('type', 'text')
    term.setAttribute('placeholder', 'Term')
    term.setAttribute('id', 'term'+termNums)
    term.setAttribute('class', 'term')
    
    var definition = document.createElement('input')
    definition.setAttribute('type', 'text')
    definition.setAttribute('placeholder', 'Definition')
    definition.setAttribute('id', 'definition'+termNums)
    definition.setAttribute('class', 'definition')
    
    tempDiv.append(term)
    tempDiv.append(definition)
    termDiv.append(tempDiv)
}

// 仅在setpage.html页面执行卡片生成逻辑
document.addEventListener("DOMContentLoaded", function() {
    const flashcardContainer = document.getElementById('flashcards')
    if (!flashcardContainer) return

    // 读取并解析localStorage数据
    const termsArr = JSON.parse(localStorage.getItem("terms") || "[]")
    const defsArr = JSON.parse(localStorage.getItem("definitions") || "[]")

    // 清空默认的示例卡片
    const defaultCard = flashcardContainer.querySelector('.cardcontainer')
    if (defaultCard) defaultCard.remove()

    // 循环生成抽认卡
    for (let i = 0; i < termsArr.length; i++) {
        importSets(termsArr[i], defsArr[i], flashcardContainer)
    }
})

function importSets(termText, definitionText, container) {
    // 创建卡片结构
    const cardContainer = document.createElement('div')
    const cardFade = document.createElement('div')
    const front = document.createElement('div')
    const back = document.createElement('div')
    const termEl = document.createElement('h2')
    const definitionEl = document.createElement('h2')

    // 设置类名
    cardContainer.setAttribute('class', 'cardcontainer')
    cardFade.setAttribute('class', 'card fade')
    front.setAttribute('class', 'front')
    back.setAttribute('class', 'back')
    termEl.setAttribute('class', 'termText')
    definitionEl.setAttribute('class', 'definitionText')

    // 设置内容
    termEl.textContent = termText
    definitionEl.textContent = definitionText

    // 组装DOM
    front.append(termEl)
    back.append(definitionEl)
    cardFade.append(front)
    cardFade.append(back)
    cardContainer.append(cardFade)
    container.append(cardContainer)
}

3. 修正script.js的轮播逻辑 #

原showSlides函数的判断条件错误，导致无法正确切换幻灯片，修正如下：

let slideIndex = 1;

// 页面加载后重新获取卡片并绑定点击事件
document.addEventListener("DOMContentLoaded", function() {
    const cards = document.querySelectorAll(".card");
    cards.forEach((e) => {
        e.addEventListener("click", () => {
            e.classList.toggle("flipCard");
        });
    });
    showSlides(slideIndex);
})

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n)
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("card");
    
    // 修正边界判断：当n超出范围时重置索引
    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }

    // 隐藏所有卡片
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    // 显示当前索引的卡片
    slides[slideIndex - 1].style.display = "block";
}

关键说明 #

• 确保setpage.html中依然引入createset.js和script.js，顺序保持不变：

  <script src="script.js"></script>
  <script src="createset.js"></script>
  

• 新增了空内容过滤，避免生成空白抽认卡；页面加载时会移除默认的示例卡片，仅显示用户创建的内容。

内容的提问来源于stack exchange，提问作者Maddy Young