Javascript 关于未定义数组的查询

当我修改代码时，我发现我编写的代码无法正常运行，但显示的单词总是“未定义”，但我多次检查代码是否完美。你能帮我看一下吗？那真的让我很困惑…非常感谢。我非常感谢你的帮助

正文{显示：块；
保证金：自动；
文本对齐：居中；}
画布{边框：1px纯黑；}
var帆布；
var-ctx；
无功定时器；
var words=[“独木舟”、“佛”、“象”、“骰子”]//
var words=[“独木舟”、“佛”、“象”、“骰子”]；
var answerIndex=-1；
var answer_x=-1；
var-y=-1；
var plate_x=-1；
var plate_y=-1；
var得分=0；
函数绘图（）
{ctx.clearRect（0,0，canvas.width，canvas.height-10）；
//canvas=document.getElementById（“canvas”）；
//ctx=canvas.getcontext（“2d”）
答案_x+=3；
答案_y+=3；
var answer=单词[answerIndex]；
ctx.font=“20px Arial”；
ctx.fillStyle=“黑色”；
ctx.fillText（答案，答案x，答案y）；
var距离=答案x-板x；
document.getElementById（“plate_x”）.innerHTML=plate_x；
document.getElementById（“word_x”）.innerHTML=answer_x；
document.getElementById（“dist”）.innerHTML=距离；
如果（回答y>=板y）
{
清除间隔（计时器）；
如果（（距离-50））
{
document.getElementById（“message”）.innerHTML=“Bravo！”；
分数++；
document.getElementById（“score”）.innerHTML=score；
}
其他的
{
document.getElementById（“message”）.innerHTML=“游戏结束！”；
}
}
}
函数getRandomIndex（）
{var random_number=Math.random*words.length；
var random_int=数学地板（随机数）；
返回随机整数；
}
函数播放（）
{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
answerIndex=getRandomIndex（）；
var answer=单词[answerIndex]；
var imageFileName=answer+“.jpg”；
document.getElementById（“myPic”）.src=imageFileName；
答案x=0；
答案y=0；
clearRect（0,0，canvas.width，canvas.height）；
板x=0；
板y=画布高度-10；
ctx.fillStyle=“蓝色”；
ctx.fillRect（板x，板y，50,10）；
清除间隔（计时器）；
定时器=设置间隔（“draw（）”，100）；
}
函数moveleft（）
{ctx.clearRect（板x，板y，50,10）；
如果（板x>0）
{plate_x-=20；}
ctx.fillStyle=“蓝色”；
ctx.fillRect（板x，板y，50,10）；
}
函数moveright（）
{ctx.clearRect（板x，板y，50,10）；
如果在
getRandomIndex（）
函数中（plate_x），您忘记了
Math.random
后面的括号，它将
random
作为属性而不是方法访问。因此公式中的
Math.random
应该是
Math.random（）

当前代码不工作，因为
getRandomIndex（）
函数返回
NaN
：

function getRandomIndex() {
  var random_number = Math.random * words.length;
  var random_int = Math.floor(random_number);

  console.log(Math.random);
  // ƒ random() { [native code] }

  console.log(random_number);
  // NaN

  console.log(random_int);
  // NaN

  return random_int;
}

如果将当前代码改为使用
Math.random（）
，则
getRandomIndex（）
函数将返回所需的随机整数值：

function getRandomIndex() {
  var random_number = Math.random() * words.length; // changed code
  var random_int = Math.floor(random_number);

  console.log(Math.random());
  // 0.40108128192401526 (of course this value will change each time)

  console.log(random_number);
  // 3.613675793700807 (of course this value will change each time)

  console.log(random_int);
  // 3 (of course this value will change each time)

  return random_int;
}

为了跟进来自的评论，将来如果遇到类似的情况，您可以始终
console.log（）
函数中未返回预期输出的某些值。这将帮助您在控制台中没有错误时解决问题。
您的变量ctx未定义，因为您在函数play（）中定义了ctx

在脚本开始时，您声明了所有变量，但将ctx和canvas留空

var canvas; //<------ You leave canvas empty
var ctx; //<------ You leave ctx empty
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

var canvas；//“我想知道是否有什么东西可以更精确地定位bug”-是的！您的web浏览器有内置的调试工具。（好吧，无论如何它应该有。如果没有，请使用更好的web浏览器。）使用这些工具，您可以在代码中设置断点以暂停实时执行，并在代码执行时逐行检查代码。您可以观察运行时的值和行为，并明确指出功能最初偏离预期的地方。@benvc也可以正确编辑这两个错误，但是，在呃我把Math.random修改成Math.random（），网站可以完美运行。那么，这是否意味着在每个函数中向ctx添加声明是不必要的？我们如何通过使用console.log（）找到Math.random的问题？之前，我在函数getRandomIndex（）下添加了console.log（）浏览器只是告诉我第66行和第106行有问题。然而，第66行和第106行实际上是完美的。第66行：document.getElementById（“myPic”）.src=imageFileName；第106行：
Play。但是，浏览器没有告诉我们Math.random的问题。您介意告诉我如何使用console.log（）找到它吗？非常感谢。我非常感谢您的帮助。@JackyChau-编辑了答案，以提供有关如何使用
console.log（）的更详细示例
查看您的
getRandomIndex（）
函数有什么问题。哦，我明白了。非常感谢您详细细致的回复。根据您所说的，我现在已经理解了。
function play() {
  canvas = document.getElementById("Canvas");
  ctx = canvas.getContext("2d"); //<---- Here you add a value
  answerIndex = getRandomIndex();
  var answer = words[answerIndex];
  var imageFileName = answer + ".jpg";
  document.getElementById("myPic").src = imageFileName;

  answer_x = 0;
  answer_y = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  plate_x = 0;
  plate_y = canvas.height - 10;
  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);
  clearInterval(timer);
  timer = setInterval("draw()", 100);
}

var canvas;
var ctx; //<--- here you leave it empty
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height - 10); //<---  Here you are calling ctx but ctx is not defined!
  //canvas=document.getElementById("Canvas");
  //ctx=canvas.getcontext("2d") //Here you are randomly identifying ctx but you made a comment of it...
  answer_x += 3;
  answer_y += 3;

  var answer = words[answerIndex];
  ctx.font = "20px Arial"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillStyle = "black"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillText(answer, answer_x, answer_y); //<---  Here you are calling ctx but ctx is not defined!
  var distance = answer_x - plate_x;
  document.getElementById("plate_x").innerHTML = plate_x;
  document.getElementById("word_x").innerHTML = answer_x;
  document.getElementById("dist").innerHTML = distance;
  if (answer_y >= plate_y) {
    clearInterval(timer);
    if ((distance < 50) && (distance > -50)) {
      document.getElementById("message").innerHTML = "Bravo!";
      score++;
      document.getElementById("score").innerHTML = score;
    } else {
      document.getElementById("message").innerHTML = "Game over!";
    }
  }
}

function getRandomIndex() {
  var random_number = Math.random * words.length;
  var random_int = Math.floor(random_number);
  return random_int;
}

function play() {
  canvas = document.getElementById("Canvas");
  ctx = canvas.getContext("2d"); // <--- here you correctly identified ctx
  answerIndex = getRandomIndex();
  var answer = words[answerIndex];
  var imageFileName = answer + ".jpg";
  document.getElementById("myPic").src = imageFileName;

  answer_x = 0;
  answer_y = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height); //<---- So this can be executed and is NOT undefined
  plate_x = 0;
  plate_y = canvas.height - 10;
  ctx.fillStyle = "blue"; //<---- So this can be executed and is NOT undefined
  ctx.fillRect(plate_x, plate_y, 50, 10); //<---- So this can be executed and is NOT undefined
  clearInterval(timer);
  timer = setInterval("draw()", 100);
}


function moveleft() {
  ctx.clearRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

  if (plate_x > 0) {
    plate_x -= 20;
  }

  ctx.fillStyle = "blue"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

}

function moveright() {
  ctx.clearRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

  if (plate_x < (canvas.width - 50)) {
    plate_x += 20;
  }

  ctx.fillStyle = "blue"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

}

var canvas = document.getElementById("Canvas"); //<----- Like this
var ctx = canvas.getContext("2d"); //<------ Like this
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

<html>
    <head>

       Remove your script from here
    </head>
    <body>
       All the contents of your body           

       And place your script here
    </body>
</html>

var canvas;
var ctx;
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

function draw() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  ctx.clearRect(0, 0, canvas.width, canvas.height - 10);
  answer_x += 3;
  answer_y += 3;

  var answer = words[answerIndex];
  ctx.font = "20px Arial";
  ctx.fillStyle = "black";
  ctx.fillText(answer, answer_x, answer_y);
  var distance = answer_x - plate_x;
  document.getElementById("plate_x").innerHTML = plate_x;
  document.getElementById("word_x").innerHTML = answer_x;
  document.getElementById("dist").innerHTML = distance;
  if (answer_y >= plate_y) {
    clearInterval(timer);
    if ((distance < 50) && (distance > -50)) {
      document.getElementById("message").innerHTML = "Bravo!";
      score++;
      document.getElementById("score").innerHTML = score;
    } else {
      document.getElementById("message").innerHTML = "Game over!";
    }
  }
}

function getRandomIndex() {
  var random_number = Math.random * words.length;
  var random_int = Math.floor(random_number);
  return random_int;
}

function play() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  answerIndex = getRandomIndex();
  var answer = words[answerIndex];
  var imageFileName = answer + ".jpg";
  document.getElementById("myPic").src = imageFileName;

  answer_x = 0;
  answer_y = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  plate_x = 0;
  plate_y = canvas.height - 10;
  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);
  clearInterval(timer);
  timer = setInterval("draw()", 100);
}


function moveleft() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  ctx.clearRect(plate_x, plate_y, 50, 10);

  if (plate_x > 0) {
    plate_x -= 20;
  }

  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);

}

function moveright() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  ctx.clearRect(plate_x, plate_y, 50, 10);

  if (plate_x < (canvas.width - 50)) {
    plate_x += 20;
  }

  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);

}