CODEWITHSUNDEEP
javascript
John Chau
John Chau

Reputation: 99

Inquiry about Undefined array

As I have revised on the codes, I have found that the code that I wrote cannot function normally but the words shown are always “undefined”, but I have checked many times that the code seems perfect. Could you mind to have a look and check for me? That really confused me a lot...Thank you very much. I appreciate your help very much. 

<!DOCTYPE html>
<html>
<head> 
<style>
body{display:block; 
margin:auto;
text-align:center;}
canvas{border:1px solid black;}
</style>
<script>
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()
{ ctx.clearRect(0,0,canvas.width,canvas.height-10);
//canvas=document.getElementById("Canvas");
//ctx=canvas.getcontext("2d")
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");
ctx=canvas.getContext("2d");
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()
{ 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()
{ 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);

}
</script>
</head>
<body>
<h1>Catch the word!</h1>
<img id="myPic" alt="no pic" src="" width="200"/><br/>
<canvas id="Canvas" width="300" height="250"></canvas>
<br/><button onclick="play()">Play</button>
<button onclick="moveleft()">&larr;</button>
<button onclick="moveright()">&rarr;</button>
<p id="message">Move to catch the word!</p>
<p id="score"></p>
<p>Plate X-coordinate:</p><p id="plate_x"></p>
<p>Word X-coordinate:</p><p id="word_x"></p>
<p>Distance:</p><p id="dist"></p>
</body>
</html>

Upvotes: 2

Views: 72

Answers (2)

benvc
benvc

Reputation: 15120

In your getRandomIndex() function, you forgot the parenthesis after Math.random, which accesses random as a property rather than a method. So Math.random in your formula should be Math.random() instead.

Your current code doesn't work because your getRandomIndex() function returns 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;
}

If you change your current code to use Math.random() instead, then your getRandomIndex() function will return the random integer value you are expecting:

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

To follow on the comment from @David, in the future if you run into something like this you could always console.log() some of the values from the function that is not returning the expected output. This will help you run down your issue when there are no errors in the console.

Upvotes: 1

Bjorn
Bjorn

Reputation: 93

Your variable ctx is undefined because you define ctx in the function play().

and at the beginning of your script you are declaring all your variables but you leave ctx and canvas empty

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;

At the play function you assign a value to it.

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

But that value will only be available within that function.

and all your other functions also use ctx! In the folowing code block I clarified all the places where it went wrong and where it didn't go wrong.

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!

}

SO the solution will be to declare ctx and canvas at the beginning like this:

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;

But in order for this to work you will need the remove the script from the head and place it all the way to the bottom of your body like this:

<html>
    <head>

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

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

or declare ctx at the beginning of every function that needs it like this:

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

}

Also please read the comments of other people too because they might note other mistakes that I didn't see

Upvotes: 0

Related Questions