有没有办法简化这个 JavaScript 代码?
Is there a way to simplify this JavaScript code?
我知道这是一个宽泛的问题,但我还是新手不知道要 search/ask 做什么。
我有一个 Jeopardy 游戏的 JavaScript 系列。我相信有更好的方法可以做到这一点,因为有太多的重复。我在想一些变量、数组、and/or 在调用函数时传递 ID 但不知道从哪里开始的东西。任何想法,将不胜感激。我不要求任何人做这项工作,只是给我一些想法和例子,告诉我该往哪个方向走。
var score = 0;
//Disable the question button
function disableButton(btnID){
document.getElementById(btnID.id).disabled = true;
}
//Show current score
function endQuestion(){
alert ("Your total score is now " +score);
}
//Toggle Images On
function showImgBtn1(){
document.getElementById('btn1pic').style.visibility = 'visible';
setTimeout(askQuestion1,3000);
}
function showImgBtn2(){
document.getElementById('btn2pic').style.visibility = 'visible';
setTimeout(askQuestion2,3000);
}
//This keeps going for every question--repeated 9 to 20 times
//Questions
function askQuestion1()
{
var answer = prompt ("What body system contains the heart, blood, arteries, and veins?") .toLowerCase();
if (answer==="circulatory") {
alert ("Correct!");
score += 100;
}
else {
alert ("Sorry, incorrect.");
score -= 100;
}
endQuestion();
document.getElementById('btn1pic').style.visibility = 'hidden';
}
function askQuestion2()
{
var answer = prompt ("What body system contains the brain, spinal cord, and nerves?") .toLowerCase();
if (answer==="nervous") {
alert ("Correct!");
score += 200;
}
else {
alert ("Sorry, incorrect.");
score -= 200;
}
endQuestion();
document.getElementById('btn2pic').style.visibility = 'hidden';
}
//This keeps going for every question--same code, just replace the question and answer repeated 9 to 20 times
我在 HTML 页面上是这样称呼它的:
<td><button id="btn1" onclick="showImgBtn1();disableButton(btn1)">100</button></td> //each button has a successive ID
这就是我在 HTML 页面上设置图片的方式:
<div>
<img class="picClue" id="btn1pic" src="btn1.jpg" height="200px">
<img class="picClue" id="btn2pic" src="btn2.jpg" height="200px">
<img class="picClue" id="btn3pic" src="btn3.jpg" height="200px">
<img class="picClue" id="btn4pic" src="btn4.jpg" height="200px">
</div>
感谢任何建议!
我看到了一些您可以改进的地方。注意到代码中有很多重复是一件好事。首先,函数 askQuestion1
和 askQuestion2
做的事情完全一样,只是有几个变量不同。所以你可以创建一个函数并将不同的值存储到一个对象中。像这样:
let values = {
question1: {
questionText: "What body system contains the heart, blood, arteries, and veins?",
correctValue: "circulatory",
id: 'btn1pic'
},
question2: {
questionText: "What body system contains the brain, spinal cord, and nerves?",
correctValue: "nervous",
id: 'btn2pic'
}
}
let score = 0;
function askQuestion(question)
{
var answer = prompt(question.questionText);
// validate null and check if the answer is correct.
if (answer && answer.toLowerCase() === question.correctValue) {
alert ("Correct!");
score += 100;
}
else {
alert ("Sorry, incorrect.");
score -= 100;
}
endQuestion();
document.getElementById(question.id).style.visibility = 'hidden';
}
function endQuestion() {}
askQuestion(values.question1);
askQuestion(values.question2);
as Edric pointed out in ,最好验证您的用户没有取消提示,从而导致 answer
变量中出现空值。
您甚至可以将您的问题保存在一个数组中,然后使用 for
循环来询问每个问题:
let values = [
{
questionText: "What body system contains the heart, blood, arteries, and veins?",
correctValue: "circulatory",
id: 'btn1pic'
},
{
questionText: "What body system contains the brain, spinal cord, and nerves?",
correctValue: "nervous",
id: 'btn2pic'
}
]
/* ... */
for(let i = 0; i < values.length; i ++) {
askQuestion(values[i]);
}
您的 showImgBtn
函数也是如此,有一个问题变量会减少重复。
//Toggle Images On
function showImgBtn(question){
document.getElementById(question.id).style.visibility = 'visible';
setTimeout(() => { askQuestion(question); },3000);
}
除此之外,它接缝很好。
我强烈建议您也查看评论,很多人都在建议改进我的回答的方法。
我知道这是一个宽泛的问题,但我还是新手不知道要 search/ask 做什么。
我有一个 Jeopardy 游戏的 JavaScript 系列。我相信有更好的方法可以做到这一点,因为有太多的重复。我在想一些变量、数组、and/or 在调用函数时传递 ID 但不知道从哪里开始的东西。任何想法,将不胜感激。我不要求任何人做这项工作,只是给我一些想法和例子,告诉我该往哪个方向走。
var score = 0;
//Disable the question button
function disableButton(btnID){
document.getElementById(btnID.id).disabled = true;
}
//Show current score
function endQuestion(){
alert ("Your total score is now " +score);
}
//Toggle Images On
function showImgBtn1(){
document.getElementById('btn1pic').style.visibility = 'visible';
setTimeout(askQuestion1,3000);
}
function showImgBtn2(){
document.getElementById('btn2pic').style.visibility = 'visible';
setTimeout(askQuestion2,3000);
}
//This keeps going for every question--repeated 9 to 20 times
//Questions
function askQuestion1()
{
var answer = prompt ("What body system contains the heart, blood, arteries, and veins?") .toLowerCase();
if (answer==="circulatory") {
alert ("Correct!");
score += 100;
}
else {
alert ("Sorry, incorrect.");
score -= 100;
}
endQuestion();
document.getElementById('btn1pic').style.visibility = 'hidden';
}
function askQuestion2()
{
var answer = prompt ("What body system contains the brain, spinal cord, and nerves?") .toLowerCase();
if (answer==="nervous") {
alert ("Correct!");
score += 200;
}
else {
alert ("Sorry, incorrect.");
score -= 200;
}
endQuestion();
document.getElementById('btn2pic').style.visibility = 'hidden';
}
//This keeps going for every question--same code, just replace the question and answer repeated 9 to 20 times
我在 HTML 页面上是这样称呼它的:
<td><button id="btn1" onclick="showImgBtn1();disableButton(btn1)">100</button></td> //each button has a successive ID
这就是我在 HTML 页面上设置图片的方式:
<div>
<img class="picClue" id="btn1pic" src="btn1.jpg" height="200px">
<img class="picClue" id="btn2pic" src="btn2.jpg" height="200px">
<img class="picClue" id="btn3pic" src="btn3.jpg" height="200px">
<img class="picClue" id="btn4pic" src="btn4.jpg" height="200px">
</div>
感谢任何建议!
我看到了一些您可以改进的地方。注意到代码中有很多重复是一件好事。首先,函数 askQuestion1
和 askQuestion2
做的事情完全一样,只是有几个变量不同。所以你可以创建一个函数并将不同的值存储到一个对象中。像这样:
let values = {
question1: {
questionText: "What body system contains the heart, blood, arteries, and veins?",
correctValue: "circulatory",
id: 'btn1pic'
},
question2: {
questionText: "What body system contains the brain, spinal cord, and nerves?",
correctValue: "nervous",
id: 'btn2pic'
}
}
let score = 0;
function askQuestion(question)
{
var answer = prompt(question.questionText);
// validate null and check if the answer is correct.
if (answer && answer.toLowerCase() === question.correctValue) {
alert ("Correct!");
score += 100;
}
else {
alert ("Sorry, incorrect.");
score -= 100;
}
endQuestion();
document.getElementById(question.id).style.visibility = 'hidden';
}
function endQuestion() {}
askQuestion(values.question1);
askQuestion(values.question2);
as Edric pointed out in answer
变量中出现空值。
您甚至可以将您的问题保存在一个数组中,然后使用 for
循环来询问每个问题:
let values = [
{
questionText: "What body system contains the heart, blood, arteries, and veins?",
correctValue: "circulatory",
id: 'btn1pic'
},
{
questionText: "What body system contains the brain, spinal cord, and nerves?",
correctValue: "nervous",
id: 'btn2pic'
}
]
/* ... */
for(let i = 0; i < values.length; i ++) {
askQuestion(values[i]);
}
您的 showImgBtn
函数也是如此,有一个问题变量会减少重复。
//Toggle Images On
function showImgBtn(question){
document.getElementById(question.id).style.visibility = 'visible';
setTimeout(() => { askQuestion(question); },3000);
}
除此之外,它接缝很好。
我强烈建议您也查看评论,很多人都在建议改进我的回答的方法。