Utilizing an event listener on the button element, the user is prompted to select a language first. Upon selection, the button in question is presented to them. Clicking on this button triggers a callback function that allows the user to begin the quiz. Everything was functioning properly until this morning, but now clicking on the button doesn't result in any action. There are no errors displayed in the console, leaving me unsure of where the issue might be.
After visiting the MDN documentation - link provided below - I came across a statement that a button with a type="button" attribute "has no default behavior and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur."
I removed this attribute, but the button still remains unresponsive.
const intro = document.querySelector(".intro");
const finalMessage = document.querySelector(".finalMessage")
const select = document.querySelector("select");
const finalScoreImage = document.getElementById("finalScoreImage");
const welcomeText = document.querySelector(".welcomeText")
const btn = document.querySelector("button");
const header = document.querySelector("header")
const animeQuiz = document.querySelector(".animeQuiz");
const timer = document.querySelector(".timer");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".choices").children];
const numberOfChoices = choices.length;
const finalScore = document.querySelector(".finalScore");
const squares = document.querySelector(".squares");
const progressBar = document.querySelector(".progressBar");
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;
let japaneseAnime = []
// Japanese anime data
let japaneseAnimeJapanese = [
{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
// Additional Japanese anime data entries ...
// English translated anime data
let japaneseAnimeEnglish = [
{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
// Additional English translated anime data entries ...
// Event listener for language selection
select.addEventListener("change", selectLanguage)
// Function to handle language selection
function selectLanguage() {
if(select.value === "日本語") {
welcomeText.innerHTML = "アニメクイズへようこそ下のボタンをクリックしてゲームを初めて下さい";
btn.innerHTML = "クイズボタン";
header.innerHTML = "画像に対応する名称を選択する";
japaneseAnime = japaneseAnimeJapanese;
} else {
welcomeText.innerHTML = "Welcome to the amime quiz click on the button below to get started";
btn.innerHTML = "quiz button";
header.innerHTML = "select the name corresponding to the image";
japaneseAnime = japaneseAnimeEnglish;
}
btn.style.display = "block";
select.style.display = "none";
}
// Event listener for starting the quiz
btn.addEventListener("click", startQuiz);
// Function to start the quiz
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
app();
}
// Function to initialize quiz
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000);
}
// Additional functions: randomNumber, uniqueNumbers, displayChoicesAndPicture, userAnswer, checkAnswer, rightAnswer, wrongAnswer, update, userScore, displaySquares, timedQuiz
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Custom CSS styling for the quiz elements */
MDN Button Element Documentation
const intro = document.querySelector(".intro");
const select = document.querySelector("select");
const finalScoreImage = document.getElementById("finalScoreImage");
const welcomeText = document.querySelector(".welcomeText")
const btn = document.querySelector("button");
const header = document.querySelector("header")
const animeQuiz = document.querySelector(".animeQuiz");
const timer = document.querySelector(".timer");
const anime_picture = document.querySelector(".anime_picture img");
const choices = [...document.querySelector(".choices").children];
const numberOfChoices = choices.length;
const finalScore = document.querySelector(".finalScore");
const squares = document.querySelector(".squares");
const progressBar = document.querySelector(".progressBar");
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;
let japaneseAnime = []
// Japanese anime data
let japaneseAnimeJapanese = [
// Data entries ...
// English translated anime data
let japaneseAnimeEnglish = [
// Data entries ...
// Event listener for language selection
select.addEventListener("change", selectLanguage)
// Function to handle language selection
// Function to initialize quiz
// Additional functions ...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Custom CSS styling */