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

Привет Всем Первые данные:

    let NewDivForGame_0 = document.createElement('div');
    let NewDivForGame_1 = document.createElement('div');
    let NewDivForGame_2 = document.createElement('div');

И так далее... 12 Далее:

  NewDivForGame_0.id = 'Key';
        NewDivForGame_1.id = 'string_1';
            NewDivForGame_2.id = '1a1';

И так далее... 12 Далее: доп. Далее:

   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);

Это не работает. Помоги мне, пожалуйста. Пожалуйста, напишите решение.

Попробовал: 1)document.getElementById("NewDivForGame_"+i.id).style.width = "35px"; //ERROR 2)document.getElementById("NewDivForGame_"+[i].id).style.width = "35px"; //ERROR 3)

let DetectPer = "NewDivForGame_";
document.getElementById(DetectPer+i.id).style.width = "35px"; //ERROR

Это не работает. Помоги мне, пожалуйста. Пожалуйста, напишите решение.

Выдает конкретное сообщение об ошибке? Если это так, пожалуйста, опубликуйте это

jop frenken 11.11.2022 08:35

Попробуйте сначала добавить его в документ. Я не думаю, что вы можете редактировать стиль, если он не существует в DOM.

jop frenken 11.11.2022 08:42

Вы добавили элементы в DOM? Вы не можете использовать getElementById для «вещей», которых нет в DOM.

Bqardi 11.11.2022 08:42

Добро пожаловать в Stack Overflow! Пожалуйста, опубликуйте минимально воспроизводимый пример вашей попытки, отметив ввод и ожидаемый результат с помощью редактора фрагментов [<>].

mplungjan 11.11.2022 08:47

Если бы вы опубликовали минимальный воспроизводимый пример с соответствующими HTML и CSS, я мог бы лучше объяснить свое решение. Я уверен, что решение тривиально, если вы используете CSS и класс вместо стилей, сгенерированных JS.

mplungjan 11.11.2022 10:55
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
3
5
65
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы не можете создавать свои селекторы таким образом — это принятие желаемого за действительное. Чтобы сделать то, что вы пытаетесь, вам понадобится 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"))

ОП, похоже, не понимает, почему они не могут так создавать свои селекторы; возможно, объяснение в порядке?

Daedalus 11.11.2022 09:05

Это настолько неправильно, что трудно объяснить, насколько неправильно;)

mplungjan 11.11.2022 09:09

Мое обновление лучше?

mplungjan 11.11.2022 09:13

Я бы так сказал, но я собираюсь немного поработать над своим ответом, хотя сейчас я проголосовал за ваш.

Daedalus 11.11.2022 09:16

Спасибо за ответ. Но это не совсем то, что мне нужно.

KimL 11.11.2022 10:06
Ответ принят как подходящий

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

   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);
}

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

Ваше объяснение лучше моего. Решение не является улучшением. OP должен опубликовать свой HTML, и тогда я уверен, что мы сможем реорганизовать все это с помощью классов, CSS и JS с одним вкладышем.

mplungjan 11.11.2022 10:54

@mplungjan Решение на самом деле предназначено не для улучшения, а для того, чтобы научить ОП тому, что они сделали неправильно. Это правда, что им нужно опубликовать свой HTML-код, чтобы мы могли научить их лучшей методологии ведения дел. Тем не менее, есть еще несколько неизвестных помимо HTML, таких как целевые браузеры, ранее существовавшие ограничения и, конечно же, сама среда (школа и т. д.). Мне это кажется проблемой XY, но без дальнейших исследований это было лучшее, что я мог сделать.

Daedalus 11.11.2022 12:34

Другой пример, может быть, не такой короткий, как у @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';
  }
}

Спасибо за ответ. Мне понравилось решение @Daedalus

KimL 11.11.2022 10:12

Другие вопросы по теме