JavaScript is displaying an error message stating that the array variable has not been

Question

JavaScript is displaying an error message stating that the array variable has not been

I'm currently going through a Javascript tutorial on YouTube and I've encountered an error that's puzzling me. Everything seems to be in order with the array definition.

Uncaught ReferenceError: words is not defined

window.addEventListener("load",initial());
//Global variables
let time = 5;
let score =0;
let isPlaying;

//DOM variables
const wordInput_input= document.querySelector('#word-input');
const currentWord_h2 = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');

const words = ['hat', 'river', 'lucky', 'state'];

//Initialize game
function initial(){
    //Load word from the array
    showWord(words);
}

//Pick and display random word
function showWord(words){
    //Generate random array index
    const randIndex = Math.floor(Math.random() * words.length);
    // Display random word
    currentWord_h2.innerHTML = words[randIndex];
}

javascript arrays

Answer 1

Answer №1

Don't forget that when you use initial as an event listener on the first line (

window.addEventListener("load",initial());

), the variable words may not be defined yet.

To avoid this issue, consider moving the event listener to the bottom of your code.

This scenario is related to Hoisting in Javascript. Remember, variables declared with const are not hoisted. For more information on hoisting, refer to this resource.

Answer 2

Don't forget that when you use initial as an event listener on the first line (

window.addEventListener("load",initial());

), the variable words may not be defined yet.

To avoid this issue, consider moving the event listener to the bottom of your code.

This scenario is related to Hoisting in Javascript. Remember, variables declared with const are not hoisted. For more information on hoisting, refer to this resource.

Answer 3

Answer №2

Instead of calling the initial function directly, make sure to attach it as an event listener. Modify

window.addEventListener("load",initial());

to

window.addEventListener("load",initial);

. Also, be cautious when invoking the showWords function with words before its initialization.

window.addEventListener("load", initial);
//Global variables
let time = 5;
let score = 0;
let isPlaying;

//DOM variables
const currentWord_h2 = document.querySelector('#current-word');

const words = ['hat', 'river', 'lucky', 'state'];

//Initialize game
function initial() {
  //Load word from the array
  showWord(words);

}

//Select and display random word
function showWord(words) {
  //Generate random index within the array length
  const randIndex = Math.floor(Math.random() * words.length);
  // Output randomly selected word
  currentWord_h2.innerHTML = words[randIndex];
}

<h2 id="current-word">Test</h2>

Answer 4

Instead of calling the initial function directly, make sure to attach it as an event listener. Modify

window.addEventListener("load",initial());

to

window.addEventListener("load",initial);

. Also, be cautious when invoking the showWords function with words before its initialization.

window.addEventListener("load", initial);
//Global variables
let time = 5;
let score = 0;
let isPlaying;

//DOM variables
const currentWord_h2 = document.querySelector('#current-word');

const words = ['hat', 'river', 'lucky', 'state'];

//Initialize game
function initial() {
  //Load word from the array
  showWord(words);

}

//Select and display random word
function showWord(words) {
  //Generate random index within the array length
  const randIndex = Math.floor(Math.random() * words.length);
  // Output randomly selected word
  currentWord_h2.innerHTML = words[randIndex];
}

<h2 id="current-word">Test</h2>

Answer 5

Answer №3

By declaring the variable 'words' as a global constant, you can access it from any function. If you are encountering an undefined error, it may be due to the script executing too quickly and trying to use the variable before it's fully created. Adding a small delay, like 100 milliseconds, in the function can resolve this issue. Here is an example of how you can implement it:

window.addEventListener("load",initial());
//Global variables
let time = 5;
let score =0;
let isPlaying;

//DOM variables
const wordInput_input= document.querySelector('#word-input');
const currentWord_h2 = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');

const words = ['hat', 'river', 'lucky', 'state'];

//Initialise game
function initial(){
    //Load word from the array
      showWord();
}

//Pick and show random word
function showWord(){
  setTimeout(function(){
    //Test Call to words Now is Completed
    console.log(words);
    //Generate random array index
    const randIndex = Math.floor(Math.random() * words.length);
    // Output random word
    currentWord_h2.innerHTML = words[randIndex];
    },100);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Document</title>
</head>
<body>
<input type="text" value="word" id="word-input">
<input type="text" value="current" id="current-word">
<input type="text" value="20" id="score">
<input type="text" value="05:00" id="time">

</body>
</html>

Answer 6

By declaring the variable 'words' as a global constant, you can access it from any function. If you are encountering an undefined error, it may be due to the script executing too quickly and trying to use the variable before it's fully created. Adding a small delay, like 100 milliseconds, in the function can resolve this issue. Here is an example of how you can implement it:

window.addEventListener("load",initial());
//Global variables
let time = 5;
let score =0;
let isPlaying;

//DOM variables
const wordInput_input= document.querySelector('#word-input');
const currentWord_h2 = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');

const words = ['hat', 'river', 'lucky', 'state'];

//Initialise game
function initial(){
    //Load word from the array
      showWord();
}

//Pick and show random word
function showWord(){
  setTimeout(function(){
    //Test Call to words Now is Completed
    console.log(words);
    //Generate random array index
    const randIndex = Math.floor(Math.random() * words.length);
    // Output random word
    currentWord_h2.innerHTML = words[randIndex];
    },100);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Document</title>
</head>
<body>
<input type="text" value="word" id="word-input">
<input type="text" value="current" id="current-word">
<input type="text" value="20" id="score">
<input type="text" value="05:00" id="time">

</body>
</html>

JavaScript is displaying an error message stating that the array variable has not been

Answer №1

Answer №2

Answer №3

Similar questions

Avoid the automatic scrolling of a datatable to the top when clicking on a button within a column using jQuery

"Exploring the various configurations for session handling in NodeJs

Async ngInit does not function properly when using $q promises

Implementing authentication fallback during re-login when a session expires in a web application built with React, Node.js, and Mariadb database

Alter the background color of a React application with a single click in a spontaneous manner

Transferring information in Laravel with the help of Axios and Vue Framework

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

JavaScript: The hyperlink provided in the data-href attribute is not functioning properly within the carousel

Is there a way to verify if an email is already registered within a MERN stack application

sort the array based on its data type

Discovering the total of elements in specific locations within two arrays

How to eliminate spaces while preserving line breaks in a textarea using JS or jQuery

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

Retrieving components from Ajax response data

Elevate the functionality of your table in BoostrapVue by customizing it to display items

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

Executing a function from a JavaScript file within Robot Framework

Angular formly - Enhancing User Input Focus

Execute a PHP function through an AJAX request to dynamically update a template variable in PHPBB

Transitioning from SJAX to AJAX