Форум

javascript_pupil · #1 (**permalink**) 15.03.2023, 10:49

Добавляю в форму поля 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

Сообщение от javascript_pupil

// - НЕ работает

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

javascript_pupil · #3 (**permalink**) 15.03.2023, 12:54

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

javascript_pupil · #4 (**permalink**) 15.03.2023, 13:07

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

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

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

рони · #5 (**permalink**) 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 · #6 (**permalink**) 15.03.2023, 22:55

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

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

javascript_pupil · #7 (**permalink**) 15.03.2023, 23:28

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

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

рони · #8 (**permalink**) 16.03.2023, 03:25

Сообщение от javascript_pupil

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

Цитата:

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

Шаблонные строки

Сообщение от javascript_pupil

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

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

javascript_pupil · #9 (**permalink**) 19.03.2023, 09:27

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

Форум

Справочник

Discord чат

Курсы javascript