單擊不同 html 頁面上的按鈕時，如何添加 css 樣式更改？

Question

我在 javascript 中做了一些小測驗。 當我的用戶在測驗結束時單擊完成按鈕時，我想讓主頁上的框周圍有一個綠色輪廓，這樣他們就知道他們已經完成了測驗。 完成按鈕在challenge1.html頁面上，我想在home.html的網格中放置大綱的項目。 誰能給我一些關於如何做到這一點的建議？

文件： home.html ， challenge1.html ， home.css ， challenge1.css quiz.js

主頁.html

         <div class="grid-container">
             <a href="challenge1.html"><div class="grid-item item1">1. Discover HTML Basics and Tags</div></a>
             <a href="challenge2.html"><div class="grid-item item2">2. Styling HTML with Tags</div></a>
             <a href="challenge3.html" class="grid-item item3"><div>3. Creating Links and Images</div></a>
             <a href="challenge4.html"><div class="grid-item item4">4. Building Features</div></a>
             <a href="challenge5.html"><div class="grid-item item5">5. Building Lists</div></a>
         </div>

挑戰1.html

        <div class="container">
              <div id="question-container" class="hide">
                <div id="question">Question</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>
                <a href="home.html"><button id="complete-btn" class="complete-btn btn hide">Complete</button></a>
            </div>
        </div>

主頁.css

.grid-container {
  display: grid;
  margin-top: 30px;
  grid-gap: 10px;
  background-color: #FFFFFF;
  padding: 10px;
}
.grid-container3 {
  display: grid;
  margin-top: 30px;
  grid-gap: 10px;
  background-color: #FFFFFF;
  padding: 10px;
  margin-bottom: 100px;
}
.grid-item {
  background-color: #E26CBA;
  padding: 20px;
  font-size: 20px;
  border-radius: 20px; 
  font-family: 'Poppins', sans-serif;
  color: #3F0068; 
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2;
}

挑戰.css

*, *::before, *::after {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  --hue-neutral: 200;
  --hue-wrong: 0;
  --hue-correct: 145;
}

body {
  --hue: var(--hue-neutral);
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--hue), 0%, 100%); 
}

body.correct {
  --hue: var(--hue-correct);
}

body.wrong {
  --hue: var(--hue-wrong);
}

.container {
  width: 800px;
  max-width: 80%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  padding: 10px;
  margin: 20px 0;
}

.btn {
  --hue: var(--hue-neutral);
  border: 1px solid hsl(var(--hue), 100%, 20%);
  background-color: hsl(var(--hue), 84%, 73%);
  border-radius: 5px;
  padding: 10px 10px;
  margin:10px;
  color: white;
  outline: none;
}

.btn:hover {
  border-color: black;
}

.btn.correct {
  --hue: var(--hue-correct);
  color: black;
}

.btn.wrong {
  --hue: var(--hue-wrong);
}

.start-btn, .next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
}
.complete-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: var(--hue-correct);
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

測驗.JS

$(document).ready(function() {
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const completeButton = document.getElementById('complete-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()
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    completeButton.innerText = 'Complete'
    completeButton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}

const questions = [
  {
    question: 'What does HTML stand for?',
    answers: [
      { text: 'Hyperlinks and Text Markup Language', correct: true },
      { text: 'Hyper Text Markup Language', correct: false },
      { text: 'Home Tool Markup Language', correct: false }
    ]
  },
  {
    question: 'Which character is used to indicate an end tag?',
    answers: [
      { text: '<', correct: false },
      { text: '*', correct: false },
      { text: '/', correct: true },
      { text: ';', correct: false }
    ]
  },
  {
    question: 'Who is making the Web standards?',
    answers: [
      { text: 'Google', correct: false },
      { text: 'Mozilla', correct: false },
      { text: 'Microsoft', correct: false },
      { text: 'The World Wide Web Consortium', correct: true }
    ]
  },
  {
    question: 'What is the correct HTML for making a text input field?',
    answers: [
      { text: '<input type="textfield">', correct: false },
      { text: '<input type="text">', correct: true },
      { text: '<textfield>', correct: false },
      { text: '<textinput type="text">', correct: false }
    ]
  },
  {
    question: 'Choose the correct HTML element for the largest heading:',
    answers: [
      { text: '<head>', correct: false },
      { text: '<h6>', correct: false },
      { text: '<heading>', correct: false },
      { text: '<h1>', correct: true }
    ]
  }
]
});

Answer 1

正如史蒂夫在上面的評論中提到的，會話存儲（或本地存儲）可能是您需要的。 例如，當用戶完成測驗時，您可以觸發以下操作：

window.sessionStorage.setItem("challengeCompleted", "true")

然后，在您的home.html頁面中，添加如下內容：

let challengeCompleted = window.sessionStorage.getItem("challengeCompleted")
if (challengeCompleted !== null && Boolean(challengeCompleted)):
    // Handle your css change here
    let btn = document.getElementById("your-btn-id");
    btn.style["border-color"] = "green";

沿着這些思路。 我沒有檢查代碼，只是從 memory 快速編寫代碼，所以可能會出錯，但這就是想法。

最后，如果您希望網頁始終記住用戶的性能，請使用localStorage ，如果每次用戶再次訪問網站時性能都會重置，請使用sessionStorage 。