Случайные поля в сетке JavaScript

Math.random() иногда возвращает 0, но ваши идентификаторы начинаются с 1, например: «квадрат1», «квадрата0» нет div.

Запустите цикл с 0: for (var i = 0; i < 100; i++)

you have to change 2 things:

1. начальное значение i должно быть 0 при создании квадратов

2. когда вы делаете красную коробку, то

заменять

if (playerOne.indexOf(randomIndex)

с участием

if (playerOne.indexOf(randomIndex) === -1 && obstacles.indexOf(randomIndex) === -1) {

вот окончательный код

var grid = document.getElementById("grid-box");

// create 100 squares
for (var i = 0; i < 100; i++) { // first change
 var square = document.createElement("div");
 square.className = 'square';
 square.id = 'square' + i;
 grid.appendChild(square);
}

var obstacles = [];

while (obstacles.length < 10) {
var randomIndex = parseInt(99 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {        
    obstacles.push(randomIndex);
    document.getElementById('square' + randomIndex).style.backgroundColor = 'yellow';
 }
}

var playerOne = [];
while (playerOne.length < 1) {
 var randomIndex = parseInt(99 * Math.random());    
 if (playerOne.indexOf(randomIndex) === -1 && obstacles.indexOf(randomIndex) === -1) { // second change
     playerOne.push(randomIndex);
     document.getElementById('square' + randomIndex).style.backgroundColor = 'red';
  }
}

Это потому, что когда randomIndex будет равен нулю (0), вы ищете элемент с идентификатором «square0», и он недоступен, потому что ваш цикл for начинается с 1 до 100.