Как починить динамический select и option через JavaScript?
У меня есть код, который создаёт новые и по нажатию на кнопку. Если пользователь в динамически созданном выбирает "Кнопка", то по нажатию на этот моментально должен появится второй , в котором будет задаваться ссылка для кнопки. НО при на жатии на "Поле ввода", не должен появляться для ссылки. Уже половину дня мучаюсь, чтобы создавался сразу после на нажатия на "Кнопка". То создаётся после нажатия на основную кнопку, то вообще не создаётся. Возможно, я запутанно объяснил, но в я думаю, что вы поняли основную суть.
const addNewInputForForm = document.getElementById("addNewInput");
addNewInputForForm.addEventListener("click", addInputsForForm);
let selectTypeArr = [];
let smallFormsArr = [];
function addInputsForForm() {
const parent = document.getElementById("inputs");
const select = document.createElement("select");
const input = document.createElement("input");
let selectName = `selectType${selectTypeArr.length + 1}`;
selectTypeArr.push(selectName)
select.name = selectName;
const option1 = document.createElement("option");
option1.value = 'submit';
const option2 = document.createElement("option");
option2.value = 'text';
input.type = 'input';
let formName = `form${smallFormsArr.length + 1}`;
smallFormsArr.push(formName);
input.name = formName;
input.value = '';
input.placeholder = 'Введите текст для input';
input.className = 'design light-green lighten-5'
const br = document.createElement("br");
parent.appendChild(select);
select.appendChild(option1);
option1.innerHTML = "Кнопка";
select.appendChild(option2);
option2.innerHTML = "Поле ввода";
parent.appendChild(input);
parent.appendChild(br);
document.cookie = `inputsForFormLength=${smallFormsArr.length}`;
const selectFind = document.getElementsByName(selectName)[0];
// select.setAttribute('onchange', "addInputSetLink(" + selectFind + ")");
select.addEventListener('click', addInputSetLink(selectFind));
}
function addInputSetLink(select) {
console.log(select.value);
if (select.value == "submit") {
const parent = document.getElementById("inputs");
let inputsSetLinkArr = [];
const inputSetLink = document.createElement("input");
inputSetLink.type = 'input';
let inputSetLinkName = `inputSetLink${inputsSetLinkArr.length + 1}`;
inputsSetLinkArr.push(inputSetLinkName);
inputSetLink.name = inputSetLinkName;
inputSetLink.placeholder = 'Задайте ссылку для input';
inputSetLink.className = 'design light-green lighten-5'
const br = document.createElement("br");
parent.appendChild(inputSetLink);
parent.appendChild(br);
document.cookie = `inputsSetLinkLength=${inputsSetLinkArr.length}`;
}
}
Источник: Stack Overflow на русском