Quiz应用Grid布局显示异常：点击开始后容器无法显现

核心问题排查 #

你的Quiz容器点击后不显示，主要是以下几个原因导致：

• Start按钮未绑定点击事件，点击后根本没触发startGame函数
• JS代码中使用了未定义的logo变量，执行时抛出错误，中断了后续添加显示类的代码
• CSS存在语法错误，嵌套选择器的写法不符合原生CSS规范

分步修复 #

1. 绑定Start按钮的点击事件

修改HTML中的Start按钮，添加onclick调用startGame()：

<button id="start" class="button-56" role="button" onclick="startGame()">Start</button>

2. 移除未定义的logo相关代码

如果页面中没有logo元素，直接删除这行报错代码：

// 删除此行，因为logo变量未定义
// logo.forEach(logoElement => logoElement.remove());

3. 修复CSS嵌套语法错误

原生CSS不支持嵌套选择器，把.container内的#question样式移到外部：

.container{
    background: white;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
}
.container #question{
    font-size: 25px;
    margin-bottom: 150px;
}

4. 优化CSS优先级（可选但推荐）

为了确保show-container类能覆盖quizField的display:none，修改选择器提升优先级：

.quizField.show-container{
    display: grid;
}

修复后的完整代码示例 #

HTML

<body>
    <!-- Main container for the page -->
    <div class="container">
        <!-- Question and Answer Fields-->
        <div id='quiz-container' class="quizField">
            <div id="question"></div>
            <input type="text" id="answer-input" placeholder="Your Answer">
            <button class='button-56' id="submit-btn" onclick="submitAnswer()">Submit</button>
            <div id="result"></div>
            <div id="total-score"></div>
        </div>
        <div class="grid">
            <button id="start" class="button-56" role="button" onclick="startGame()">Start</button>
            <label for='fileInput' id='list' class="button-56">Open JSON File </label>
            <input type="file" id="fileInput" class="file" accept=".json" />
            <button id='contact' class="button-56" role="button">Contact</button>
        </div>
    </div>
</body>

JavaScript

const buttonGrid = document.querySelector('.grid');
function startGame() {
    buttonGrid.remove(); // Remove the entire grid container

    const selectedFile = fileInput.files[0];

    if (selectedFile) {
        const reader = new FileReader();

        reader.onload = function (e) {
            const fileContent = e.target.result;

            try {
                const quizData = JSON.parse(fileContent);
                displayQuiz(quizData);
            } catch (error) {
                console.error("Error parsing JSON file:", error);
            }
        };

        reader.readAsText(selectedFile);
    } else {
        console.error("No file selected.");
    }
    
    const quizField = document.getElementById('quiz-container');
    quizField.classList.add('show-container');
}

CSS

.container{
    background: white;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
}
.container #question{
    font-size: 25px;
    margin-bottom: 150px;
}
.quizField{
    display: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
#submit-btn{
    margin-top: 50px;
    display: inline-block;
    margin: 0 auto;
}
#result {
    margin-top: 20px;
}
#total-score{
    font-size: 18px;
    margin-top: 20px;
    font-weight: bold;
}
.quizField.show-container{
    display: grid;
}
.button-56{
    align-items: center;
    background-color: rgb(74, 227, 36);
    border: 2px solid #111;
    border-radius: 8px;
    box-sizing: border-box;
    color: #111;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    line-height: 24px;
    max-width: 100%;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.button-56:after{
    background-color: lightgrey;
    border-radius: 8px;
    content: "";
    display: block;
    height: 48px;
    left: 0;
    width: 100%;
    position: absolute;
    top: -2px;
    transform: translate(8px, 8px);
    transition: transform .2s ease-out;
    z-index: -1;
}
.button-56:hover:after{
    transform: translate(0, 0);
}
  
.button-56:active{
    background-color: #ffdeda;
    outline: 0;
}
  
.button-56:hover{
    outline: 0;
}

内容的提问来源于stack exchange，提问作者Michael Anderson