Идентификатор вызова JS по переменной

Вы не можете создавать свои селекторы таким образом — это принятие желаемого за действительное. Чтобы сделать то, что вы пытаетесь, вам понадобится eval или, что еще хуже:

window["NewDivForGame_"+i].id

Ни то, что не рекомендуется

Почему бы не получить к ним доступ с помощью querySelectorAll, здесь я нахожу все элементы, где идентификатор начинается с NewDivForGame

document.querySelectorAll("[id^=NewDivForGame]").forEach(div => {
  div.style.width  = "35px"; 
  div.style.height= "35px"; //ERROR
  div.style.backgroundColor = "blue";
})

Или используйте css и класс

.blueStyle { 
  width: 35px;      
  height: 35px;
  background-color: blue;
}

И делать

 NewDivForGame.classList.add("blueStyle") 

Или

document.querySelectorAll("[id^=NewDivForGame]").forEach(div => div.classList.add("blueStyle"))

Основные проблемы с вашим кодом - это следующие строки:

   for (i=0;i<=12;i++){
       document.getElementById("NewDivForGame_"+i.id).style.width  = "35px"; //ERROR
       document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
       document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
       console.info('Create size div run #'+i);
   ...

Насколько я могу судить, вы пытаетесь получить доступ к своим переменным, ожидая, что ваш браузер оценит результат объединения строки с числом.

Кроме того, вы пытаетесь получить доступ к свойству id из i, которое в его нынешнем виде является числом. Числовой примитив не имеет свойства id, но, судя по вашему коду, вы, возможно, смешивали его со своим предположением о строке/оценке.

Наконец, ваша строка [i] фактически создавала массив с числом i, являющимся единственным элементом. Массивы также не имеют свойства id.

(Не)К счастью, Javascript так не работает. По крайней мере, не совсем так; для того, чтобы браузер или контейнер делали то, что вы ожидаете, есть несколько методов, которые можно было бы использовать, но я собираюсь сослаться только на два; ужасный eval(), о котором я не буду говорить, потому что это опасная практика и буквальное определение объекта. Конечно, есть и другие способы, например, другие существующие ответы здесь, но:

// Here, we define an object literal and assign it properties for each div manually.
let gameDivs = {
  NewDivForGame_0: document.createElement('div'),
  NewDivForGame_1: document.createElement('div'),
  // etc
};

// And then assign the id values sort of like you do in your question;
gameDivs.NewDivForGame_0.id = 'Key';
gameDivs.NewDivForGame_1.id = 'string_1';
gameDivs.NewDivForGame_2.id = '1a1';
// etc

for (i=0;i<=12;i++){
       // Before finally using square bracket notation to target the
       // properties by a dynamic name;
       document.getElementById(gameDivs["NewDivForGame_"+i].id).style.width  = "35px";
       document.getElementById(gameDivs["NewDivForGame_"+i].id).style.height= "35px"; 
       document.getElementById(gameDivs["NewDivForGame_"+i].id).style.backgroundColor = "blue";
       console.info('Create size div run #'+i);
}

Конечно, вам даже не нужно выбирать их по их идентификатору, если у вас есть ссылка на них, что вы и делаете:

for (i=0;i<=12;i++){
       // Before finally using square bracket notation to target the
       // properties by a dynamic name;
       gameDivs["NewDivForGame_"+i].style.width  = "35px";
       gameDivs["NewDivForGame_"+i].style.height= "35px"; 
       gameDivs["NewDivForGame_"+i].style.backgroundColor = "blue";
       console.info('Create size div run #'+i);
}

В этом примере предполагается, что элементы div добавляются к документу.

Эта методология использует квадратные скобки для литерала объекта. Как вы можете знать или не знать, квадратные скобки следует использовать при доступе к свойству объекта динамическим способом, например, как вы пытались сделать с конкатенацией строк ранее.

Из-за того, как ведут себя объекты, вы можете даже сгенерировать элементы div с помощью цикла for, а затем добавить их к объекту:

let gameDivs = {};

for (let i = 0; i<=12; i++) {
    let gameDiv = document.createElement('div');
    gameDivs["NewDivForGame_"+i] = gameDiv;
    // append them too;
    document.body.appendChild(gameDiv);
}

Конечно, я понятия не имею, какой шаблон вы используете для создания идентификаторов элементов, но в целом приведенное выше сработает.

Другой пример, может быть, не такой короткий, как у @mplungjan, но он показывает, как это можно сделать по-другому.

Если вы хотите создать элементы, вы можете использовать для этого простой цикл for, но тогда вам нужно добавить их в DOM как дочерний элемент другого элемента DOM. В приведенном ниже примере я добавил первый «div» как дочерний элемент тела, второй как дочерний элемент первого и так далее.

Поскольку все ссылки на элементы хранятся в массиве newDivForGame, мы можем использовать его для изменения свойств стиля с помощью простого цикла for.

{
  const newDivForGame = [];
  for (let i = 0; i < 12; ++i) {
      newDivForGame.push(document.createElement('div'));
      newDivForGame[i].id = `key${i}`;
      document.body.appendChild(newDivForGame[I]);
  }

  for (const elem of newDivForGame) {
      elem.style.width = '35px';
      elem.style.height = '35px';
      elem.style.background = 'blue';
  }
}