我試圖為 JavaScript 測驗應用程式添加圖像,但我嘗試了一切,以不同的方式添加“img src”屬性,但似乎沒有任何效果...請幫助它用於需要完成的項目。這是我的程式碼...
const quizData = [{ question: "Which language runs in a web browser?", a: "Java", b: "C", c: "Python", d: "javascript", correct: "d", }, { question: "What does CSS stand for?", a: "Central Style Sheets", b: "Cascading Style Sheets", c: "Cascading Simple Sheets", d: "Cars SUVs Sailboats", correct: "b", }, { question: "What does HTML stand for?", a: "Hypertext Markup Language", b: "Hypertext Markdown Language", c: "Hyperloop Machine Language", d: "Helicopters Terminals Motorboats Lamborginis", correct: "a", }, { question: "What year was JavaScript launched?", a: "1996", b: "1995", c: "1994", d: "none of the above", correct: "b", }, { question: "Is this a test run?", a: "yes it is", b: "why do you care?", c: "stop asking", d: "I don't know", correct: "d", }, { question: "where do you see yourself in years?", a: "In the gutter", b: "Forbes magazine", c: "Simple guy", d: "outside the country", correct: "b", }, ]; const quiz = document.getElementById('quiz') const answerEls = document.querySelectorAll('.answer') const questionEl = document.getElementById('question') const a_text = document.getElementById('a_text') const b_text = document.getElementById('b_text') const c_text = document.getElementById('c_text') const d_text = document.getElementById('d_text') const submitBtn = document.getElementById('submit') let currentQuiz = 0 let score = 0 loadQuiz() function loadQuiz() { deselectAnswers() const currentQuizData = quizData[currentQuiz] questionEl.innerText = currentQuizData.question a_text.innerText = currentQuizData.a b_text.innerText = currentQuizData.b c_text.innerText = currentQuizData.c d_text.innerText = currentQuizData.d } function deselectAnswers() { answerEls.forEach(answerEl => answerEl.checked = false) } function getSelected() { let answer answerEls.forEach(answerEl => { if (answerEl.checked) { answer = answerEl.id } }) return answer } submitBtn.addEventListener('click', () => { const answer = getSelected() if (answer) { if (answer === quizData[currentQuiz].correct) { score++ } currentQuiz++ if (currentQuiz < quizData.length) { loadQuiz() } else { quiz.innerHTML = ` <h2>You answered ${score}/${quizData.length} questions correctly</h2> <button onclick="location.reload()">Reload</button> ` } } })
<div class="quiz-container" id="quiz"> <div class="quiz-header"> <h2 id="question">Question Text</h2> <ul> <li> <input type="radio" name="answer" id="a" class="answer"> <label for="a" id="a_text">Answer</label> </li> <li> <input type="radio" name="answer" id="b" class="answer"> <label for="b" id="b_text">Answer</label> </li> </ul> </div> <button id="submit">Submit</button> </div>
我想在問題發生變化時添加不同的圖像。我該怎麼做?
我假設您希望圖像與innerHTML一起出現在測驗結束時。也許您使用的 URL 不是絕對的?我添加了一個帶有絕對 URL 的圖像,它可以工作: