javascript 网格布局显示未出现

xqnpmsa8 于 12个月前发布在 Java

关注(0)|答案(1)|浏览(106)

这是我的代码为一个测验Web应用程序我目前正试图有测验容器有display: none;，直到我按下开始游戏，容器将更改为display: grid;这是我遇到我的问题时，我试图揭示它不会出现的div. HTML

const buttonGrid = document.querySelector('.grid');
function startGame() {
    buttonGrid.remove(); // Remove the entire grid container
    logo.forEach(logoElement => logoElement.remove()); // Remove each logo element

    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');

}

.container{
    background: white;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    #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;
}
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;
}

<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">Start</button>
            <label  for='fileInput' id='list' class="button-56">Open JSON File </label>
                <input type="file" id="fileInput" class="file" accept=".json" /></button>
                 
            <button id='contact' class="button-56" role="button">Contact</button>
        </div>

JavaScript

来源：https://stackoverflow.com/questions/77755198/grid-layout-display-not-appearing

1条答案

按热度按时间

nqwrtyyt1#

随着onclick="startGame()"添加到开始按钮，和一些JavaScript注解了。

const buttonGrid = document.querySelector('.grid');
function startGame() {
    buttonGrid.remove(); // Remove the entire grid container
/*
    logo.forEach(logoElement => logoElement.remove()); // Remove each logo element
    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');

}

.container {
    background: white;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    #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;
}
.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;
}

<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>
                 
            <button id='contact' class="button-56" role="button">Contact</button>
        </div>

赞(0）回复(0）举报 12个月前

我来回答

javascript 网格布局显示未出现

1条答案

相关问题

热门标签

最新问答