Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2023, 10:49
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

Как поставить фокус на 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="">


Поля добавляются, но фокус на них не ставится. Что то делаю не так. Пробовал и с разными кавычками - не помогло. Как правильно указать идентификатор для нового поля, чтобы оно оказалось в фокусе?
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2023, 12:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от javascript_pupil
// - НЕ работает
дописать строку и вставить нужное id
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2023, 12:54
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

Не понимаю. Как дописать? Скрипт ведь не знает, сколько раз нажмет "добавить" пользователь. Там любая цифра может быть. А конструкцию answers[i] javascript не обрабатывает. В Гугле тоже не нашел примеров с конструкциями типа [i].
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2023, 13:07
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

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

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


Тоже не работает.
Ответить с цитированием
  #5 (permalink)  
Старый 15.03.2023, 13:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.03.2023, 22:55
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

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

Вопросик: а почему эта конструкция не работает в IE 11? Мне реально интересно. Не так давно столкнулся с тем, что мои старые javascript не работают в новых браузерах. Оказалось, что у M$ были свои (нестандартные) теги, после замены которых скрипты стали работать и в старом IE 11 и в новых браузерах тоже.
Ответить с цитированием
  #7 (permalink)  
Старый 15.03.2023, 23:28
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

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

Ок, внутри квадратных скобок индекс нужного нам элемента массива. А что означает ${i}? Откуда там хеш?
Ответить с цитированием
  #8 (permalink)  
Старый 16.03.2023, 03:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от javascript_pupil
И еще вопрос вот к этому фрагменту: [${i}]
Цитата:
если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в ${…}:
Шаблонные строки

Сообщение от javascript_pupil
Вопросик: а почему эта конструкция не работает в IE 11?
document.getElementById("answers[" + i +"]").focus();
Ответить с цитированием
  #9 (permalink)  
Старый 19.03.2023, 09:27
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поставить задержку на fetch при событии oninput vlad_kl Общие вопросы Javascript 10 14.04.2021 14:55
Поставить фокус на input fori Javascript под браузер 3 30.01.2021 16:17
как при клике на <li> поставить значение в <select>? ViRuSreloaded Элементы интерфейса 25 19.10.2014 21:12
Как снять фокус со всех элементов? Logo Общие вопросы Javascript 7 02.07.2009 23:53
Как передать фокус флешке на странице? dArky Общие вопросы Javascript 3 10.08.2008 01:03