Quiz问答增删功能异常：新增内容被覆盖且丢失

核心问题 #

1. 重复问题覆盖已有条目：你用问题文本作为对象的key，一旦输入相同的问题，新答案会直接覆盖旧的，导致之前的内容看似消失。
2. 删除操作未持久化：删除条目后没有更新localStorage，刷新页面后删除的内容会重新出现。
3. 内联onclick存在语法风险：如果问题文本包含单引号，deleteQuiz('${key}')会触发语法错误，导致删除按钮失效。
4. HTML标签关联错误：输入框的label标签for属性指向错误的id，导致点击标签无法聚焦对应输入框。

修复方案 #

1. 改用数组存储数据：将原对象改为数组，每个元素是包含question和answer的对象，彻底避免重复覆盖问题。
2. 持久化删除操作：删除条目后同步更新localStorage，确保修改永久生效。
3. 使用事件委托处理删除：给父元素Quizlist绑定点击事件，通过事件目标判断是否点击了删除按钮，避免内联事件的语法问题。
4. 修正HTML label关联：将label的for属性改为对应输入框的id，修复标签聚焦功能。

修改后的完整代码 #

JavaScript

// 从localStorage加载数据，默认是空数组
let quizList = JSON.parse(localStorage.getItem("quizList")) || [];
let currentQuestionIndex;

function addQuizQuestion() {
    const question = questionforQuiz.value.trim();
    const answer = answer.value.trim();
    
    // 避免空内容添加
    if (!question || !answer) return;
    
    quizList.push({ question, answer });
    questionforQuiz.value = '';
    answer.value = '';
    
    localStorage.setItem("quizList", JSON.stringify(quizList));
    renderQuizList();
}

function renderQuizList() {
    Quizlist.innerHTML = ''; 
    quizList.forEach((item, index) => {
        Quizlist.innerHTML += `
            <li>${item.question} - ${item.answer}
            <button data-index="${index}">x</button>
            </li>`;
    });
}

// 事件委托处理删除
Quizlist.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        if (confirm("Möchten sie wirklich diese Frage inkl. Antwort löschen?")) {
            const index = parseInt(e.target.dataset.index);
            quizList.splice(index, 1);
            localStorage.setItem("quizList", JSON.stringify(quizList));
            renderQuizList();
        }
    }
});

function nextQuizQuestion() {
    if (quizList.length === 0) return;
    currentQuestionIndex = Math.floor(Math.random() * quizList.length);
    // 确保页面存在id为question的元素
    if (document.getElementById('question')) {
        document.getElementById('question').innerHTML = quizList[currentQuestionIndex].question;
    }
}

function compare() {
    if (quizList.length === 0) return;
    const userAnswer = Textfield.value.trim();
    // 确保页面存在id为text的元素
    if (document.getElementById('text')) {
        document.getElementById('text').innerHTML = userAnswer === quizList[currentQuestionIndex].answer ? "Richtig!" : "Falsch!";
    }
    Textfield.value = '';
    nextQuizQuestion();
}

// 页面加载时渲染列表
window.onload = renderQuizList;

CSS

body {
    background-color: lightblue;
    overflow: hidden;
}

.mdl-textfield {
    width: 100%;
}

#Hinzufügen {
    width: 100%;
}

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<body>
    <h1>Quizfragen erstellen</h1>
    <br><br>

    <form onsubmit="addQuizQuestion();return false;">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="questionforQuiz">
            <label class="mdl-textfield__label" for="questionforQuiz">Quizfrage eingeben...</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="answer">
            <label class="mdl-textfield__label" for="answer">Quizantwort eingeben...</label>
        </div>

        <button id="Hinzufügen" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Hinzufügen
        </button>
    </form>

    <ul id="Quizlist"></ul>

    <!-- 补充原代码中缺失的答题相关元素 -->
    <div id="question"></div>
    <input type="text" id="Textfield">
    <button onclick="compare()">Prüfen</button>
    <div id="text"></div>
</body>

额外说明 #

• 原代码中question、Textfield、text元素未在HTML中定义，已在修改后的HTML中补充，确保答题功能正常运行。
• 添加了空内容判断，避免添加空的问题或答案。
• 用数组索引标识每个条目，删除操作更可靠，无需担心文本中的特殊字符。

内容的提问来源于stack exchange，提问作者Rudi Sabri