Question

我是HTML，CSS和JS的新手，我按照教程进行了测验。我想将分数添加到测验中，所以我尝试从分数计数的前端开始以使其显示。因为我无法在原始div容器中定位“问题”和“得分”，所以将它们放入名为“问题容器”的单独容器中。

     <div class="container">
                <div id="question-container">
                <div id="question">Question</div>
                <div id="scorecount">Score</div>
                </div>
                  <div id="answer-buttons" class="btn-grid">
                    <button class="btn">Answer 1</button>
                    <button class="btn">Answer 2</button>
                    <button class="btn">Answer 3</button>
                    <button class="btn">Answer 4</button>
                  </div>
                </div>
        <div class="controls">
            <button id="start-btn" class="start-btn btn">Start</button>
            <button id="next-btn" class="next-btn btn hide">Next</button>
        </div>
    </div>

这是我使用的HTML，但是由于某种原因，它现在将“开始”和“下一步”按钮从容器中推出了！ As seen here

它以前看起来像this。

我希望有人能帮助我！我感觉这与javascript有关，因为我使用了“隐藏”功能，因此当您单击“开始”时，它将显示问题。

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})

function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0
  questionContainerElement.classList.remove('hide')
  setNextQuestion()
}

我希望有人能提供帮助！谢谢，任务。

Answer 1

我相信这是因为存在无与伦比的div括号。（在以下代码段中的注释旁边）。它会关闭您的div.container，因此div.controls在它外面并被推出。删除该行，它应该恢复原状。

<div class="container">
    <div id="question-container">
        <div id="question">Question</div>
        <div id="scorecount">Score</div>
    </div>
    <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
    </div>
        </div>  <!-- what does this one close? -->
    <div class="controls">
        <button id="start-btn" class="start-btn btn">Start</button>
        <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
</div>

有关隐藏和显示的更新部分：

<div class="container">
    <div id="question-and-answer-container">
        <div id="question-container"> ...
        <div id="answer-buttons" class="btn-grid"> ...
    </div>
    <div class="controls">
        <button id="start-btn" class="start-btn btn">Start</button>
        <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
</div>

...以便您可以显示/隐藏相关部分。隐藏question-and-answer，仅在开始时显示控件。不过，您可能都需要一个比问答形式更好的名称和一个更好的结构。

顺便说一句，不要灰心。这是编程。这种关于结构的思考。您可能希望获得的幻想只是在考虑这种结构后再考虑这种结构... :)如果您在底层上弄错了，您可以想象您是如何复杂化的上一层和下一层等

另一个顺便说一句，我确实意识到您可能想先学习基础知识。那太好了。但是请务必检查类似pug的内容。原因是您（我，每个人）一次只能考虑很多事情。编程与管理复杂性有关。不要通过对丢失的div砸头来进行管理。看看上面的内容在pug中看起来有多明显：

.container
    #question-container
        #question Question
        #scorecount Score
    #answer-buttons.btn-grid
        button.btn Answer 1
        button.btn Answer 2
        button.btn Answer 3
        button.btn Answer 4
    .controls
        button#start-btn.start-btn.btn Start
        button#next-btn.next-btn.btn.hide Next

button.foo Text与<button class='foo'>Text</button>相同无需编写div.container（只是.container），也无需关闭div，它通过缩进关闭。＃是ID，是课程。

现在，不要挂在哈巴狗上，什么是npm安装。但是一定要挂在工具上，或者换句话说，是如何简化：）

干杯，祝你好运

Answer 2

如果我们正确缩进您的代码：

<div class="container">
    <div id="question-container">
        <div id="question">Question</div>
        <div id="scorecount">Score</div>
    </div>
    <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
    </div>
</div>
<div class="controls">
    <button id="start-btn" class="start-btn btn">Start</button>
    <button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>

您可以看到controls div位于container之外，这是因为</div>标签有一个额外的结尾。删除它应该可以解决您的问题。

努力在问答游戏中定位按钮

2 个答案: