有没有办法简化这段 JavaScript 代码？

Question

我知道这是一个广泛的问题，但我仍然是新手，不知道要搜索/询问什么。

我有一个 Jeopardy 游戏的 JavaScript 系列。我相信有更好的方法来做到这一点，因为有太多的重复。我正在考虑一些变量、数组和/或在调用函数时传递 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>

感谢您的任何建议！

Answer 1

我看到了一些你可以改进的地方。你注意到你的代码中有很多重复是一件好事。首先，除了几个变量之外，函数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);

正如Edric在评论中指出的那样，最好验证您的用户没有取消提示，从而导致您的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函数，有一个问题变量会减少重复。

    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]);
    }

除此之外，它接缝很好。

我强烈建议您也查看评论，很多人都在建议改进我的答案的方法。