Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как поставить фокус на id который постоянно меняется? (https://javascript.ru/forum/misc/85042-kak-postavit-fokus-na-id-kotoryjj-postoyanno-menyaetsya.html)

javascript_pupil 15.03.2023 10:49

Как поставить фокус на id который постоянно меняется?
 
Добавляю в форму поля input с помощью такой конструкции:

function addField() {

let i = document.querySelectorAll('[name="answers"]').length;

document.getElementById("choice").insertAdjacentHTML('beforeEnd', '<input id="answers['+i+']" type="text" name="answers" value="">');

document.getElementById(answers[i]).focus; // - НЕ работает
}
</script>


В результате получается такой HTML. Это работает.
<input name="answers" id="answers[0]" type="text" value="">
<input name="answers" id="answers[1]" type="text" value="">
<input name="answers" id="answers[2]" type="text" value="">
...
<input name="answers" id="answers[100500]" type="text" value="">


Поля добавляются, но фокус на них не ставится. Что то делаю не так. Пробовал и с разными кавычками - не помогло. Как правильно указать идентификатор для нового поля, чтобы оно оказалось в фокусе?

рони 15.03.2023 12:28

Цитата:

Сообщение от javascript_pupil
// - НЕ работает

дописать строку и вставить нужное id

javascript_pupil 15.03.2023 12:54

Не понимаю. Как дописать? Скрипт ведь не знает, сколько раз нажмет "добавить" пользователь. Там любая цифра может быть. А конструкцию answers[i] javascript не обрабатывает. В Гугле тоже не нашел примеров с конструкциями типа [i].

javascript_pupil 15.03.2023 13:07

Попробовал так:

document.getElementById(answers[answers.length - 1]).focus();


Тоже не работает.

рони 15.03.2023 13:19

javascript_pupil,
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        function addField() {
            let i = document.querySelectorAll('[name="answers"]').length;
            document.getElementById("choice").insertAdjacentHTML('beforeEnd', '<input id="answers[' + i + ']" type="text" name="answers" value="">');
            document.getElementById(`answers[${i}]`).focus();
        }
    </script>
    </script>
</head>
<body>
    <div id="choice"></div>
    <button type="button" onclick="addField()">add</button>
</body>
</html>

javascript_pupil 15.03.2023 22:55

Получилось, Большое спасибо! :)

Вопросик: а почему эта конструкция не работает в IE 11? Мне реально интересно. Не так давно столкнулся с тем, что мои старые javascript не работают в новых браузерах. Оказалось, что у M$ были свои (нестандартные) теги, после замены которых скрипты стали работать и в старом IE 11 и в новых браузерах тоже.

javascript_pupil 15.03.2023 23:28

И еще вопрос вот к этому фрагменту: [${i}]

Ок, внутри квадратных скобок индекс нужного нам элемента массива. А что означает ${i}? Откуда там хеш?

рони 16.03.2023 03:25

Цитата:

Сообщение от javascript_pupil
И еще вопрос вот к этому фрагменту: [${i}]

Цитата:

если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в ${…}:
Шаблонные строки

Цитата:

Сообщение от javascript_pupil
Вопросик: а почему эта конструкция не работает в IE 11?

document.getElementById("answers[" + i +"]").focus();

javascript_pupil 19.03.2023 09:27

Большое спасибо! Стало более-менее понятно. А второй вариант работает и в IE и в Хроме. :)


Часовой пояс GMT +3, время: 19:55.