按钮在点击时不触发回调函数。没有办法知道为什么控制台没有抛出错误
button not triggering call back function when clicked on. No way to know why as no error's thrown by console
我在按钮元素上使用事件侦听器。用户的第一个要求 select 一种语言。一旦他们这样做了，他们就会看到有问题的按钮。单击它会触发回调函数，使用户能够开始进行测验。直到今天早上，一切都正常进行。但是现在当我点击所述按钮时没有任何反应。控制台甚至没有抛出错误，这可以让我知道哪里出了问题。
我继续阅读 MDN 文档 - 请参阅下面的 link - 他们说带有 type="button": " 的按钮没有默认行为，默认情况下按下时什么也不做。它可以有客户端-side 脚本监听元素的事件，当事件发生时触发。"
我去掉了这个属性，但按钮仍然没有响应。
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 = []
let japaneseAnimeJapanese = [
{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "進撃の巨人",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "ナルト",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "鬼滅の刃",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "攻殻機動隊",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
let japaneseAnimeEnglish = [
{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "Attack On Titans",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "naruto",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "Demon Slayer",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "Ghost in the shell",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
select.addEventListener("change", selectLanguage)
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"
}
btn.addEventListener("click", startQuiz);
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
finalScore.style.display = "none"
app();
console.log("josue")
}
// generates number between 0 and 3
function randomNumber() {
return Math.floor(Math.random()*numberOfChoices);
}
// generates array of uniques numbers
function uniqueNumbers() {
let listUniqueNumbers = new Set();
while(listUniqueNumbers.size < numberOfChoices) {
listUniqueNumbers.add(randomNumber());
}
return [...listUniqueNumbers];
}
// display choices
function displayChoicesAndPicture() {
anime_picture.src = japaneseAnime[counter].picture;
let unique = uniqueNumbers();
choices.forEach((choice, i) => {
choice.innerHTML = japaneseAnime[unique[i]].name;
})
}
// checking user answer
function userAnswer() {
for(var i = 0; i < japaneseAnime.length; i++) {
choices[i].addEventListener("click", checkAnswer);
}
}
function checkAnswer(e) {
e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}
function rightAnswer() {
document.getElementById(counter).style.backgroundColor = "green"
score++;
console.log(score)
update();
}
function wrongAnswer() {
document.getElementById(counter).style.backgroundColor = "red"
update();
}
function update() {
if(counter < numberOfChoices - 1) {
time = 0;
counter++;
displayChoicesAndPicture();
} else {
animeQuiz.style.display = "none"
userScore();
}
}
function userScore() {
finalScore.style.display = "block";
finalMessage.style.display = "flex";
let scoreDisplayed = (score / numberOfChoices) * 100;
finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}
function displaySquares() {
for(var i = 0; i < numberOfChoices; i++) {
element = document.createElement("div");
element.setAttribute("class", "square");
element.setAttribute("id", i);
squares.appendChild(element);
}
}
function timedQuiz() {
if(time < timeUp) {
time++
} else {
time = 0;
wrongAnswer();
update();
}
timer.innerHTML = time;
}
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background-repeat: no-repeat;
}
p {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
}
.welcomeText {
position: absolute;
color: white;
font-size: 35px;
color: rgb(255,0,0);
}
button {
position: absolute;
transform: translateY(10ch);
}
select {
position: absolute;
transform: translateY(20ch);
}
.intro_image {
position: fixed;
object-fit: cover;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
/* position: fixed; */
height: 100%;
width: 100%;
border: 1px blue solid;
}
.animeQuiz {
display: none;
justify-content: center;
align-items: center;
position: relative;
height: 800px;
width: 800px;
border: 1px red solid;
}
.anime_picture {
height: 400px;
width: 400px;
position: absolute;
}
.choices {
height: 100px;
width: 100%;
border: 1px blue solid;
bottom: 0;
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
}
.finalScore {
display: none;
position: relative;
height: 400px;
width: 400px;
border: 1px blue solid;
background: red;
}
.hide {
display: none;
}
.show {
display: block;
}
.finalMessage {
position: absolute;
justify-content: center;
align-items: center;
display: none;
border: solid black 1px;
border-radius: 100%;
height: 200px;
width: 500px;
color: blue;
transform: translateY(-120px);
transform: translateX(500px);
}
.choices > div {
height: 80px;
width: 150px;
border: 1px black solid;
background-color: #EE6F57;
cursor: pointer;
border-radius: 10px;
}
.choices > div:hover {
color: #EE6F;
}
.welcomeText {
width: auto;
height: auto;
background: white;
border-radius: 5px;
}
.choice {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
border: 1px black solid;
position: absolute;
top: 0;
font-family: fantasy;
}
.square {
height: 15px;
width: 15px;
background-color: gray;
bottom: 150px;
margin: 10px;
}
.squares {
position: absolute;
bottom: 100px;
display: flex;
justify-content: space-around;
}
.timer {
position: absolute;
bottom: 150px;
}
.progressBar {
height: 10px;
width: 300px;
position: absolute;
bottom: 140px;
background-color: grey;
border: 1px black solid;
}
button {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>anime page</title>
</head>
<body>
<div class="intro">
<img class="intro_image" src="images/backgroundImage.jpeg" alt="">
<p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
<button name="button">button quiz</button>
<select class="" name="">
<option value="">Select a language</option>
<option value="english">English</option>
<option value="日本語">日本語</option>
</select>
</div>
<div class="animeQuiz">
<div class="anime_picture">
<img src="" alt="">
</div>
<div class="choices">
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
</div>
<header>
<div class="">Select the name corresponding to the image</div>
</header>
<div class="progressBar"></div>
<div class="timer"></div>
<div class="squares"></div>
</div>
<div class="finalScore">
<img src="images/dragon-ball-z-goku.gif" alt="">
</div>
<p class="finalMessage">
<div class=""></div>
</p>
</body>
<script src="index.js" type="text/javascript"></script>
</html>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
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");
console.log(progressBar)
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;
let japaneseAnime = []
let japaneseAnimeJapanese = [
{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "進撃の巨人",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "ナルト",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "鬼滅の刃",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "攻殻機動隊",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
let japaneseAnimeEnglish = [
{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "Attack On Titans",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "naruto",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "Demon Slayer",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "Ghost in the shell",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
select.addEventListener("change", selectLanguage)
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"
}
btn.addEventListener("click", startQuiz);
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
app();
}
// generates number between 0 and 3
function randomNumber() {
return Math.floor(Math.random()*numberOfChoices);
}
// generates array of uniques numbers
function uniqueNumbers() {
let listUniqueNumbers = new Set();
while(listUniqueNumbers.size < numberOfChoices) {
listUniqueNumbers.add(randomNumber());
}
return [...listUniqueNumbers];
}
// display choices
function displayChoicesAndPicture() {
anime_picture.src = japaneseAnime[counter].picture;
let unique = uniqueNumbers();
choices.forEach((choice, i) => {
choice.innerHTML = japaneseAnime[unique[i]].name;
})
}
// checking user answer
function userAnswer() {
for(var i = 0; i < japaneseAnime.length; i++) {
choices[i].addEventListener("click", checkAnswer);
}
}
function checkAnswer(e) {
e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}
function rightAnswer() {
document.getElementById(counter).style.backgroundColor = "green"
score++;
console.log(score)
update();
}
function wrongAnswer() {
document.getElementById(counter).style.backgroundColor = "red"
update();
}
function update() {
if(counter < numberOfChoices - 1) {
time = 0;
counter++;
displayChoicesAndPicture();
} else {
animeQuiz.style.display = "none"
userScore();
}
}
function userScore() {
finalScore.style.display = "flex";
finalScoreImage.style.display = "flex"
let scoreDisplayed = (score / numberOfChoices) * 100;
console.log(score)
finalScore.innerHTML = `<p>your final score is ${scoreDisplayed}%</p>`
// `<p>your final score is ${scoreDisplayed}%</p>`
}
function displaySquares() {
for(var i = 0; i < numberOfChoices; i++) {
element = document.createElement("div");
element.setAttribute("class", "square");
element.setAttribute("id", i);
squares.appendChild(element);
}
}
function timedQuiz() {
if(time < timeUp) {
time++
} else {
time = 0;
wrongAnswer();
update();
}
timer.innerHTML = time;
}
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background-repeat: no-repeat;
}
p {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
/* background-color: red; */
}
.welcomeText {
position: absolute;
color: white;
font-size: 35px;
color: rgb(255,0,0);
}
button {
position: absolute;
transform: translateY(10ch);
}
select {
position: absolute;
transform: translateY(20ch);
}
.intro_image {
position: fixed;
object-fit: cover;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
/* position: fixed; */
height: 100%;
width: 100%;
border: 1px blue solid;
}
.animeQuiz {
display: none;
justify-content: center;
align-items: center;
position: relative;
height: 800px;
width: 800px;
border: 1px red solid;
}
.anime_picture {
height: 400px;
width: 400px;
position: absolute;
}
.choices {
height: 100px;
width: 100%;
border: 1px blue solid;
bottom: 0;
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
}
.finalScore {
position: relative;
display: none;
justify-content: center;
/* align-items: center;
height: 400px;
width: 400px;
border: 1px blue solid; */
/* background: red; */
}
#finalScoreImage {
display: none;
}
.finalMessage {
position: absolute;
}
.choices > div {
height: 80px;
width: 150px;
border: 1px black solid;
background-color: #EE6F57;
cursor: pointer;
border-radius: 10px;
}
.choices > div:hover {
color: #EE6F;
}
.welcomeText {
width: auto;
height: auto;
background: white;
border-radius: 5px;
}
.choice {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
border: 1px black solid;
position: absolute;
top: 0;
font-family: fantasy;
}
p .finalMessage {
position: absolute;
}
.square {
height: 15px;
width: 15px;
background-color: gray;
bottom: 150px;
margin: 10px;
}
.squares {
position: absolute;
bottom: 100px;
display: flex;
justify-content: space-around;
}
.timer {
position: absolute;
bottom: 150px;
}
.progressBar {
height: 10px;
width: 300px;
position: absolute;
bottom: 140px;
background-color: grey;
border: 1px black solid;
}
button {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>anime page</title>
</head>
<body>
<div class="intro">
<img class="intro_image" src="images/backgroundImage.jpeg" alt="">
<p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
<button type="button" name="button">button quiz</button>
<select class="" name="">
<option value="">Select a language</option>
<option value="english">English</option>
<option value="日本語">日本語</option>
</select>
</div>
<div class="animeQuiz">
<div class="anime_picture">
<img src="" alt="">
</div>
<div class="choices">
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
</div>
<header>
<div class="">Select the name corresponding to the image</div>
</header>
<div class="progressBar"></div>
<div class="timer"></div>
<div class="squares"></div>
</div>
<div class="finalScore">
<img id="finalScoreImage" src="images/dragon-ball-z-goku.gif" alt="">
<p class="finalMessage">well done, you've completed the quiz</p>
</div>
</body>
<script src="index.js" type="text/javascript"></script>
</html>
您的输入无效 HTML。 P不能包含一个DIV和两个
创建的空P
<p><div class=welcomeText></div></p>
和
<p class="finalMessage">
<div class=""></div>
</p>
您有块点击 select
这是一个工作版本
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 = []
let japaneseAnimeJapanese = [{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "進撃の巨人",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "ナルト",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "鬼滅の刃",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "攻殻機動隊",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
let japaneseAnimeEnglish = [{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "Attack On Titans",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "naruto",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "Demon Slayer",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "Ghost in the shell",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
select.addEventListener("change", selectLanguage)
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"
}
btn.addEventListener("click", startQuiz);
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
finalScore.style.display = "none"
app();
console.log("josue")
}
// generates number between 0 and 3
function randomNumber() {
return Math.floor(Math.random() * numberOfChoices);
}
// generates array of uniques numbers
function uniqueNumbers() {
let listUniqueNumbers = new Set();
while (listUniqueNumbers.size < numberOfChoices) {
listUniqueNumbers.add(randomNumber());
}
return [...listUniqueNumbers];
}
// display choices
function displayChoicesAndPicture() {
anime_picture.src = japaneseAnime[counter].picture;
let unique = uniqueNumbers();
choices.forEach((choice, i) => {
choice.innerHTML = japaneseAnime[unique[i]].name;
})
}
// checking user answer
function userAnswer() {
for (var i = 0; i < japaneseAnime.length; i++) {
choices[i].addEventListener("click", checkAnswer);
}
}
function checkAnswer(e) {
e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}
function rightAnswer() {
document.getElementById(counter).style.backgroundColor = "green"
score++;
console.log(score)
update();
}
function wrongAnswer() {
document.getElementById(counter).style.backgroundColor = "red"
update();
}
function update() {
if (counter < numberOfChoices - 1) {
time = 0;
counter++;
displayChoicesAndPicture();
} else {
animeQuiz.style.display = "none"
userScore();
}
}
function userScore() {
finalScore.style.display = "block";
finalMessage.style.display = "flex";
let scoreDisplayed = (score / numberOfChoices) * 100;
finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}
function displaySquares() {
for (var i = 0; i < numberOfChoices; i++) {
element = document.createElement("div");
element.setAttribute("class", "square");
element.setAttribute("id", i);
squares.appendChild(element);
}
}
function timedQuiz() {
if (time < timeUp) {
time++
} else {
time = 0;
wrongAnswer();
update();
}
timer.innerHTML = time;
}
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background-repeat: no-repeat;
}
p {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
}
.welcomeText {
position: absolute;
color: white;
font-size: 35px;
color: rgb(255, 0, 0);
}
button {
position: absolute;
transform: translateY(10ch);
}
select {
position: absolute;
transform: translateY(20ch);
}
.intro_image {
position: fixed;
object-fit: cover;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
/* position: fixed; */
height: 100%;
width: 100%;
border: 1px blue solid;
}
.animeQuiz {
display: none;
justify-content: center;
align-items: center;
position: relative;
height: 800px;
width: 800px;
border: 1px red solid;
}
.anime_picture {
height: 400px;
width: 400px;
position: absolute;
}
.choices {
height: 100px;
width: 100%;
border: 1px blue solid;
bottom: 0;
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
}
.finalScore {
display: none;
position: relative;
height: 400px;
width: 400px;
border: 1px blue solid;
background: red;
}
.hide {
display: none;
}
.show {
display: block;
}
.finalMessage {
position: absolute;
justify-content: center;
align-items: center;
display: none;
border: solid black 1px;
border-radius: 100%;
height: 200px;
width: 500px;
color: blue;
transform: translateY(-120px);
transform: translateX(500px);
}
.choices>div {
height: 80px;
width: 150px;
border: 1px black solid;
background-color: #EE6F57;
cursor: pointer;
border-radius: 10px;
}
.choices>div:hover {
color: #EE6F;
}
.welcomeText {
width: auto;
height: auto;
background: white;
border-radius: 5px;
}
.choice {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
border: 1px black solid;
position: absolute;
top: 0;
font-family: fantasy;
}
.square {
height: 15px;
width: 15px;
background-color: gray;
bottom: 150px;
margin: 10px;
}
.squares {
position: absolute;
bottom: 100px;
display: flex;
justify-content: space-around;
}
.timer {
position: absolute;
bottom: 150px;
}
.progressBar {
height: 10px;
width: 300px;
position: absolute;
bottom: 140px;
background-color: grey;
border: 1px black solid;
}
button {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>anime page</title>
</head>
<body>
<div class="intro">
<img class="intro_image" src="images/backgroundImage.jpeg" alt="">
<div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div>
<button name="button">button quiz</button>
<select class="" name="">
<option value="">Select a language</option>
<option value="english">English</option>
<option value="日本語">日本語</option>
</select>
</div>
<div class="animeQuiz">
<div class="anime_picture">
<img src="" alt="">
</div>
<div class="choices">
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
</div>
<header>
<div class="">Select the name corresponding to the image</div>
</header>
<div class="progressBar"></div>
<div class="timer"></div>
<div class="squares"></div>
</div>
<div class="finalScore">
<img src="images/dragon-ball-z-goku.gif" alt="">
</div>
<div class="finalMessage">
</div>
</body>
<script src="index.js" type="text/javascript"></script>
</html>
我在按钮元素上使用事件侦听器。用户的第一个要求 select 一种语言。一旦他们这样做了，他们就会看到有问题的按钮。单击它会触发回调函数，使用户能够开始进行测验。直到今天早上，一切都正常进行。但是现在当我点击所述按钮时没有任何反应。控制台甚至没有抛出错误，这可以让我知道哪里出了问题。
我继续阅读 MDN 文档 - 请参阅下面的 link - 他们说带有 type="button": " 的按钮没有默认行为，默认情况下按下时什么也不做。它可以有客户端-side 脚本监听元素的事件，当事件发生时触发。"
我去掉了这个属性，但按钮仍然没有响应。
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 = []
let japaneseAnimeJapanese = [
{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "進撃の巨人",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "ナルト",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "鬼滅の刃",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "攻殻機動隊",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
let japaneseAnimeEnglish = [
{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "Attack On Titans",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "naruto",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "Demon Slayer",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "Ghost in the shell",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
select.addEventListener("change", selectLanguage)
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"
}
btn.addEventListener("click", startQuiz);
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
finalScore.style.display = "none"
app();
console.log("josue")
}
// generates number between 0 and 3
function randomNumber() {
return Math.floor(Math.random()*numberOfChoices);
}
// generates array of uniques numbers
function uniqueNumbers() {
let listUniqueNumbers = new Set();
while(listUniqueNumbers.size < numberOfChoices) {
listUniqueNumbers.add(randomNumber());
}
return [...listUniqueNumbers];
}
// display choices
function displayChoicesAndPicture() {
anime_picture.src = japaneseAnime[counter].picture;
let unique = uniqueNumbers();
choices.forEach((choice, i) => {
choice.innerHTML = japaneseAnime[unique[i]].name;
})
}
// checking user answer
function userAnswer() {
for(var i = 0; i < japaneseAnime.length; i++) {
choices[i].addEventListener("click", checkAnswer);
}
}
function checkAnswer(e) {
e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}
function rightAnswer() {
document.getElementById(counter).style.backgroundColor = "green"
score++;
console.log(score)
update();
}
function wrongAnswer() {
document.getElementById(counter).style.backgroundColor = "red"
update();
}
function update() {
if(counter < numberOfChoices - 1) {
time = 0;
counter++;
displayChoicesAndPicture();
} else {
animeQuiz.style.display = "none"
userScore();
}
}
function userScore() {
finalScore.style.display = "block";
finalMessage.style.display = "flex";
let scoreDisplayed = (score / numberOfChoices) * 100;
finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}
function displaySquares() {
for(var i = 0; i < numberOfChoices; i++) {
element = document.createElement("div");
element.setAttribute("class", "square");
element.setAttribute("id", i);
squares.appendChild(element);
}
}
function timedQuiz() {
if(time < timeUp) {
time++
} else {
time = 0;
wrongAnswer();
update();
}
timer.innerHTML = time;
}
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background-repeat: no-repeat;
}
p {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
}
.welcomeText {
position: absolute;
color: white;
font-size: 35px;
color: rgb(255,0,0);
}
button {
position: absolute;
transform: translateY(10ch);
}
select {
position: absolute;
transform: translateY(20ch);
}
.intro_image {
position: fixed;
object-fit: cover;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
/* position: fixed; */
height: 100%;
width: 100%;
border: 1px blue solid;
}
.animeQuiz {
display: none;
justify-content: center;
align-items: center;
position: relative;
height: 800px;
width: 800px;
border: 1px red solid;
}
.anime_picture {
height: 400px;
width: 400px;
position: absolute;
}
.choices {
height: 100px;
width: 100%;
border: 1px blue solid;
bottom: 0;
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
}
.finalScore {
display: none;
position: relative;
height: 400px;
width: 400px;
border: 1px blue solid;
background: red;
}
.hide {
display: none;
}
.show {
display: block;
}
.finalMessage {
position: absolute;
justify-content: center;
align-items: center;
display: none;
border: solid black 1px;
border-radius: 100%;
height: 200px;
width: 500px;
color: blue;
transform: translateY(-120px);
transform: translateX(500px);
}
.choices > div {
height: 80px;
width: 150px;
border: 1px black solid;
background-color: #EE6F57;
cursor: pointer;
border-radius: 10px;
}
.choices > div:hover {
color: #EE6F;
}
.welcomeText {
width: auto;
height: auto;
background: white;
border-radius: 5px;
}
.choice {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
border: 1px black solid;
position: absolute;
top: 0;
font-family: fantasy;
}
.square {
height: 15px;
width: 15px;
background-color: gray;
bottom: 150px;
margin: 10px;
}
.squares {
position: absolute;
bottom: 100px;
display: flex;
justify-content: space-around;
}
.timer {
position: absolute;
bottom: 150px;
}
.progressBar {
height: 10px;
width: 300px;
position: absolute;
bottom: 140px;
background-color: grey;
border: 1px black solid;
}
button {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>anime page</title>
</head>
<body>
<div class="intro">
<img class="intro_image" src="images/backgroundImage.jpeg" alt="">
<p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
<button name="button">button quiz</button>
<select class="" name="">
<option value="">Select a language</option>
<option value="english">English</option>
<option value="日本語">日本語</option>
</select>
</div>
<div class="animeQuiz">
<div class="anime_picture">
<img src="" alt="">
</div>
<div class="choices">
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
</div>
<header>
<div class="">Select the name corresponding to the image</div>
</header>
<div class="progressBar"></div>
<div class="timer"></div>
<div class="squares"></div>
</div>
<div class="finalScore">
<img src="images/dragon-ball-z-goku.gif" alt="">
</div>
<p class="finalMessage">
<div class=""></div>
</p>
</body>
<script src="index.js" type="text/javascript"></script>
</html>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
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");
console.log(progressBar)
const squaresArray = [...squares.children];
let element;
[score, counter, time, timeUp] = [0, 0, 0, 10];
let Clock;
let japaneseAnime = []
let japaneseAnimeJapanese = [
{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "進撃の巨人",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "ナルト",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "鬼滅の刃",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "攻殻機動隊",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
let japaneseAnimeEnglish = [
{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "Attack On Titans",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "naruto",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "Demon Slayer",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "Ghost in the shell",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
select.addEventListener("change", selectLanguage)
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"
}
btn.addEventListener("click", startQuiz);
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
app();
}
// generates number between 0 and 3
function randomNumber() {
return Math.floor(Math.random()*numberOfChoices);
}
// generates array of uniques numbers
function uniqueNumbers() {
let listUniqueNumbers = new Set();
while(listUniqueNumbers.size < numberOfChoices) {
listUniqueNumbers.add(randomNumber());
}
return [...listUniqueNumbers];
}
// display choices
function displayChoicesAndPicture() {
anime_picture.src = japaneseAnime[counter].picture;
let unique = uniqueNumbers();
choices.forEach((choice, i) => {
choice.innerHTML = japaneseAnime[unique[i]].name;
})
}
// checking user answer
function userAnswer() {
for(var i = 0; i < japaneseAnime.length; i++) {
choices[i].addEventListener("click", checkAnswer);
}
}
function checkAnswer(e) {
e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}
function rightAnswer() {
document.getElementById(counter).style.backgroundColor = "green"
score++;
console.log(score)
update();
}
function wrongAnswer() {
document.getElementById(counter).style.backgroundColor = "red"
update();
}
function update() {
if(counter < numberOfChoices - 1) {
time = 0;
counter++;
displayChoicesAndPicture();
} else {
animeQuiz.style.display = "none"
userScore();
}
}
function userScore() {
finalScore.style.display = "flex";
finalScoreImage.style.display = "flex"
let scoreDisplayed = (score / numberOfChoices) * 100;
console.log(score)
finalScore.innerHTML = `<p>your final score is ${scoreDisplayed}%</p>`
// `<p>your final score is ${scoreDisplayed}%</p>`
}
function displaySquares() {
for(var i = 0; i < numberOfChoices; i++) {
element = document.createElement("div");
element.setAttribute("class", "square");
element.setAttribute("id", i);
squares.appendChild(element);
}
}
function timedQuiz() {
if(time < timeUp) {
time++
} else {
time = 0;
wrongAnswer();
update();
}
timer.innerHTML = time;
}
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background-repeat: no-repeat;
}
p {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
/* background-color: red; */
}
.welcomeText {
position: absolute;
color: white;
font-size: 35px;
color: rgb(255,0,0);
}
button {
position: absolute;
transform: translateY(10ch);
}
select {
position: absolute;
transform: translateY(20ch);
}
.intro_image {
position: fixed;
object-fit: cover;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
/* position: fixed; */
height: 100%;
width: 100%;
border: 1px blue solid;
}
.animeQuiz {
display: none;
justify-content: center;
align-items: center;
position: relative;
height: 800px;
width: 800px;
border: 1px red solid;
}
.anime_picture {
height: 400px;
width: 400px;
position: absolute;
}
.choices {
height: 100px;
width: 100%;
border: 1px blue solid;
bottom: 0;
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
}
.finalScore {
position: relative;
display: none;
justify-content: center;
/* align-items: center;
height: 400px;
width: 400px;
border: 1px blue solid; */
/* background: red; */
}
#finalScoreImage {
display: none;
}
.finalMessage {
position: absolute;
}
.choices > div {
height: 80px;
width: 150px;
border: 1px black solid;
background-color: #EE6F57;
cursor: pointer;
border-radius: 10px;
}
.choices > div:hover {
color: #EE6F;
}
.welcomeText {
width: auto;
height: auto;
background: white;
border-radius: 5px;
}
.choice {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
border: 1px black solid;
position: absolute;
top: 0;
font-family: fantasy;
}
p .finalMessage {
position: absolute;
}
.square {
height: 15px;
width: 15px;
background-color: gray;
bottom: 150px;
margin: 10px;
}
.squares {
position: absolute;
bottom: 100px;
display: flex;
justify-content: space-around;
}
.timer {
position: absolute;
bottom: 150px;
}
.progressBar {
height: 10px;
width: 300px;
position: absolute;
bottom: 140px;
background-color: grey;
border: 1px black solid;
}
button {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>anime page</title>
</head>
<body>
<div class="intro">
<img class="intro_image" src="images/backgroundImage.jpeg" alt="">
<p><div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div></p>
<button type="button" name="button">button quiz</button>
<select class="" name="">
<option value="">Select a language</option>
<option value="english">English</option>
<option value="日本語">日本語</option>
</select>
</div>
<div class="animeQuiz">
<div class="anime_picture">
<img src="" alt="">
</div>
<div class="choices">
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
</div>
<header>
<div class="">Select the name corresponding to the image</div>
</header>
<div class="progressBar"></div>
<div class="timer"></div>
<div class="squares"></div>
</div>
<div class="finalScore">
<img id="finalScoreImage" src="images/dragon-ball-z-goku.gif" alt="">
<p class="finalMessage">well done, you've completed the quiz</p>
</div>
</body>
<script src="index.js" type="text/javascript"></script>
</html>
您的输入无效 HTML。 P不能包含一个DIV和两个
创建的空P<p><div class=welcomeText></div></p>
和
<p class="finalMessage">
<div class=""></div>
</p>
您有块点击 select
这是一个工作版本
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 = []
let japaneseAnimeJapanese = [{
name: "ドラゴンボール",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "進撃の巨人",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "ナルト",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "鬼滅の刃",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "攻殻機動隊",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
let japaneseAnimeEnglish = [{
name: "dragon ball",
picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
name: "Attack On Titans",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
name: "naruto",
picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
name: "Demon Slayer",
picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
name: "Ghost in the shell",
picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]
select.addEventListener("change", selectLanguage)
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"
}
btn.addEventListener("click", startQuiz);
function startQuiz() {
intro.style.display = "none";
animeQuiz.style.display = "flex";
finalScore.style.display = "none"
app();
console.log("josue")
}
// generates number between 0 and 3
function randomNumber() {
return Math.floor(Math.random() * numberOfChoices);
}
// generates array of uniques numbers
function uniqueNumbers() {
let listUniqueNumbers = new Set();
while (listUniqueNumbers.size < numberOfChoices) {
listUniqueNumbers.add(randomNumber());
}
return [...listUniqueNumbers];
}
// display choices
function displayChoicesAndPicture() {
anime_picture.src = japaneseAnime[counter].picture;
let unique = uniqueNumbers();
choices.forEach((choice, i) => {
choice.innerHTML = japaneseAnime[unique[i]].name;
})
}
// checking user answer
function userAnswer() {
for (var i = 0; i < japaneseAnime.length; i++) {
choices[i].addEventListener("click", checkAnswer);
}
}
function checkAnswer(e) {
e.target.innerHTML === japaneseAnime[counter].name ? rightAnswer() : wrongAnswer();
}
function rightAnswer() {
document.getElementById(counter).style.backgroundColor = "green"
score++;
console.log(score)
update();
}
function wrongAnswer() {
document.getElementById(counter).style.backgroundColor = "red"
update();
}
function update() {
if (counter < numberOfChoices - 1) {
time = 0;
counter++;
displayChoicesAndPicture();
} else {
animeQuiz.style.display = "none"
userScore();
}
}
function userScore() {
finalScore.style.display = "block";
finalMessage.style.display = "flex";
let scoreDisplayed = (score / numberOfChoices) * 100;
finalMessage.innerHTML = `Well done you've completed the quiz. You score is ${scoreDisplayed}`
}
function displaySquares() {
for (var i = 0; i < numberOfChoices; i++) {
element = document.createElement("div");
element.setAttribute("class", "square");
element.setAttribute("id", i);
squares.appendChild(element);
}
}
function timedQuiz() {
if (time < timeUp) {
time++
} else {
time = 0;
wrongAnswer();
update();
}
timer.innerHTML = time;
}
const app = () => {
displayChoicesAndPicture();
userAnswer();
displaySquares();
setInterval(timedQuiz, 1000)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background-repeat: no-repeat;
}
p {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
}
.welcomeText {
position: absolute;
color: white;
font-size: 35px;
color: rgb(255, 0, 0);
}
button {
position: absolute;
transform: translateY(10ch);
}
select {
position: absolute;
transform: translateY(20ch);
}
.intro_image {
position: fixed;
object-fit: cover;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
/* position: fixed; */
height: 100%;
width: 100%;
border: 1px blue solid;
}
.animeQuiz {
display: none;
justify-content: center;
align-items: center;
position: relative;
height: 800px;
width: 800px;
border: 1px red solid;
}
.anime_picture {
height: 400px;
width: 400px;
position: absolute;
}
.choices {
height: 100px;
width: 100%;
border: 1px blue solid;
bottom: 0;
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
}
.finalScore {
display: none;
position: relative;
height: 400px;
width: 400px;
border: 1px blue solid;
background: red;
}
.hide {
display: none;
}
.show {
display: block;
}
.finalMessage {
position: absolute;
justify-content: center;
align-items: center;
display: none;
border: solid black 1px;
border-radius: 100%;
height: 200px;
width: 500px;
color: blue;
transform: translateY(-120px);
transform: translateX(500px);
}
.choices>div {
height: 80px;
width: 150px;
border: 1px black solid;
background-color: #EE6F57;
cursor: pointer;
border-radius: 10px;
}
.choices>div:hover {
color: #EE6F;
}
.welcomeText {
width: auto;
height: auto;
background: white;
border-radius: 5px;
}
.choice {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
border: 1px black solid;
position: absolute;
top: 0;
font-family: fantasy;
}
.square {
height: 15px;
width: 15px;
background-color: gray;
bottom: 150px;
margin: 10px;
}
.squares {
position: absolute;
bottom: 100px;
display: flex;
justify-content: space-around;
}
.timer {
position: absolute;
bottom: 150px;
}
.progressBar {
height: 10px;
width: 300px;
position: absolute;
bottom: 140px;
background-color: grey;
border: 1px black solid;
}
button {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>anime page</title>
</head>
<body>
<div class="intro">
<img class="intro_image" src="images/backgroundImage.jpeg" alt="">
<div class=welcomeText>Welcome to the amime quiz click on the button below to get started</div>
<button name="button">button quiz</button>
<select class="" name="">
<option value="">Select a language</option>
<option value="english">English</option>
<option value="日本語">日本語</option>
</select>
</div>
<div class="animeQuiz">
<div class="anime_picture">
<img src="" alt="">
</div>
<div class="choices">
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
<div class="choice">
<div class=""></div>
</div>
</div>
<header>
<div class="">Select the name corresponding to the image</div>
</header>
<div class="progressBar"></div>
<div class="timer"></div>
<div class="squares"></div>
</div>
<div class="finalScore">
<img src="images/dragon-ball-z-goku.gif" alt="">
</div>
<div class="finalMessage">
</div>
</body>
<script src="index.js" type="text/javascript"></script>
</html>