I'm getting 'Uncaught TypeError: Cannot set property 'value' of undefined' but my code still works

Question

This is my first JavaScript project, it's a game I often play in the classroom with my students using analog methods(i.e. chalk and blackboard).

this is my js :

// gets a random integer
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

//points of the game
const possibleValues = [1, 2, 3, 4, "T"];

// selects all the cells
const places = document.getElementsByClassName("place");

//assign random numbers to each cell
function assignValues() {
  for (let i = 0; i <= places.length; i++) {
    places[i].value = possibleValues[getRandomInt(0, 4)];
  }
}

assignValues();
console.log(places);
//shows the points when the cell is clicked
function showPoints() {
  event.target.style.fontSize = "xx-large";
}

body {
  margin: 25px;
  background-color: white;
  font-family: arial, sans-serif;
  font-size: 14px;
}

table {
  min-width: 800px;
  min-height: 800px;
  border: 10pc;
  border-color: black;
}

td input.place {
  min-width: 200px;
  min-height: 200px;
  background-color: white;
  border: 3px solid black;
  text-align: center;
  font-size: 0;
  font-weight: bolder;
}

SO far my code seems to work but I'm getting a 'Uncaught TypeError: Cannot set property 'value' of undefined' in Chrome console, also console.log(places) is not working, but I remember it was working before.

Do you have any idea how can I solve this issue?

Thanks

0stone0 · Accepted Answer

JavaScript Array's are 0 indexed, therefore you'll need to remove 1 from array.length if you're gonna loop through them with a for loop (<=), change

for (let i = 0; i <= places.length; i++) {

To:

for (let i = 0; i <= places.length - 1; i++) {

Or, use i < places.length so you only care if it's smaller then i

// gets a random integer
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

//points of the game
const possibleValues = [1, 2, 3, 4, "T"];

// selects all the cells
const places = document.getElementsByClassName("place");

//assign random numbers to each cell
function assignValues() {
  for (let i = 0; i <= places.length - 1; i++) {
    places[i].value = possibleValues[getRandomInt(0, 4)];
  }
}

assignValues();
console.log(places);
//shows the points when the cell is clicked
function showPoints() {
  event.target.style.fontSize = "xx-large";
}

body {
  margin: 25px;
  background-color: white;
  font-family: arial, sans-serif;
  font-size: 14px;
}

table {
  min-width: 800px;
  min-height: 800px;
  border: 10pc;
  border-color: black;
}

td input.place {
  min-width: 200px;
  min-height: 200px;
  background-color: white;
  border: 3px solid black;
  text-align: center;
  font-size: 0;
  font-weight: bolder;
}

I'm getting 'Uncaught TypeError: Cannot set property 'value' of undefined' but my code still works

Answers (2)

Related Questions

I&#39;m getting &#39;Uncaught TypeError: Cannot set property &#39;value&#39; of undefined&#39; but my code still works

Answers (2)

Related Questions

I'm getting 'Uncaught TypeError: Cannot set property 'value' of undefined' but my code still works