Why does my function come up as 'undefined'?

Question

I have tried my best for many hours to try get my code to place the html text inside the context.filltext, but for some reason, it appears as undefined on the screen.

This is my code so far:

var question001 = ["6-8", "10/2", "3+7", "5-3"];
var answer001 = ["-2", "5", "10", "2"];
var random001 = Math.floor(Math.random() * question001.length);

function submit001() {
  var b = input001.value;
  if (random001 == 0 && b == answer001[0]) {
    document.getElementById("answer001").innerHTML = "Correct..";
    document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
    document.getElementById("disappear002").innerHTML = "";

  } else if (random001 == 1 && b == answer001[1]) {
    document.getElementById("answer001").innerHTML = "Correct..";
    document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
    document.getElementById("disappear002").innerHTML = "";

  } else if (random001 == 2 && b == answer001[2]) {
    document.getElementById("answer001").innerHTML = "Correct..";
    document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
    document.getElementById("disappear002").innerHTML = "";

  } else if (random001 == 3 && b == answer001[3]) {
    document.getElementById("answer001").innerHTML = "Correct..";
    document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
    document.getElementById("disappear002").innerHTML = "";
  } else {
    document.getElementById("answer001").innerHTML = "Incorrect..";
    document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
    document.getElementById("disappear002").innerHTML = "";
  }
}

document.getElementById("name001").innerHTML = question001[random001];

function btn001() {
  random001 = Math.floor(Math.random() * question001.length);
  document.getElementById("name001").innerHTML = question001[random001];
  document.getElementById("button001").innerHTML = "";
  document.getElementById("disappear001").innerHTML = "<input type=text id=input001 autofocus>";
  document.getElementById("disappear002").innerHTML = "<button onclick=submit001()>Submit</button>";
  document.getElementById("answer001").innerHTML = "";
}

function question() {
  document.getElementById("message001").textContent;
}
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.font = '30px arial';
let scrollCounter, cameraY, current, mode, xSpeed;
let ySpeed = 5;
let height = 50;
let boxes = [];



boxes[0] = {
  x: 300,
  y: 300,
  width: 200
};
let debris = {
  x: 300,
  width: 0
};

function newBox() {
  boxes[current] = {
    x: 0,
    y: (current + 10) * height,
    width: boxes[current - 1].width
  };
}

function gameOver() {
  mode = 'gameOver';
  context.fillText('Your tower collapsed! Wanna play again?', 200, 40);
}

function animate() {
  if (mode != 'gameOver') {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillText('Score: ' + (current - 1).toString(), 10, 40);
    for (let n = 0; n < boxes.length; n++) {
      let box = boxes[n];
      context.fillStyle = 'rgb(' + n * 12 + ',' + n * 89 + ',' + n * 26 + ')';
      context.fillRect(box.x, 600 - box.y + cameraY, box.width, height);
      context.fillText(question(), 300, 340);
    }
    context.fillStyle = 'rgb';
    context.fillRect(debris.x, 600 - debris.y + cameraY, debris.width, height);
    if (mode == 'bounce') {
      boxes[current].x = boxes[current].x + xSpeed;
      if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width)
        xSpeed = -xSpeed;
      if (xSpeed < 0 && boxes[current].x < 0)
        xSpeed = -xSpeed;
    }
    if (mode == 'fall') {
      boxes[current].y = boxes[current].y - ySpeed;
      if (boxes[current].y == boxes[current - 1].y + height) {
        mode = 'bounce';
        let difference = boxes[current].x - boxes[current - 1].x;
        if (Math.abs(difference) >= boxes[current].width) {
          gameOver();
        }
        debris = {
          y: boxes[current].y,
          width: difference
        };
        if (boxes[current].x > boxes[current - 1].x) {
          boxes[current].width = boxes[current].width - difference;
          debris.x = boxes[current].x + boxes[current].width;
        } else {
          debris.x = boxes[current].x - difference;
          boxes[current].width = boxes[current].width + difference;
          boxes[current].x = boxes[current - 1].x;
        }

        current++;
        scrollCounter = height;
        newBox();
      }
    }
    debris.y = debris.y - ySpeed;
    if (scrollCounter) {
      cameraY++;
      scrollCounter--;
    }
  }
  window.requestAnimationFrame(animate);
}

function restart() {
  boxes.splice(1, boxes.length - 1);
  mode = 'bounce';
  cameraY = 0;
  scrollCounter = 0;
  xSpeed = 5;
  current = 1;
  newBox();
  debris.y = 0;
}

document.getElementById("disappear002").onclick = function() {
  if (mode == 'gameOver')
    restart();
  else {
    if (mode == 'bounce')
      mode = 'fall';
  }
};

restart();
animate();

<canvas id="myCanvas" width="800" height="500" style="border:80px solid #ffffff;"></canvas>

<body bgcolor="”#696969&quot;">
  <p style="width: 259px; vertical-align:top">

    <p id="message001">What is <text id="name001">5-3</text>.</p>
    <div id="disappear001"><input type="text" id="input001" autofocus></div>
    <div id="disappear002"><button onclick="submit001 ()">Submit</button></div>

    <p id="answer001"></p>
    <p id="button001"></p>

Answer 1

You aren't returning any value from

function question() {
  document.getElementById("message001").textContent;
}

It should be :-

function question() {
  return document.getElementById("message001").textContent;
}

Answer 2

You should return the value of textContent in your question function. Currently doesn't return anything

function question() {
   return document.getElementById("message001").textContent;
}