Блог

Я пытаюсь отформатировать этот код таким образом, чтобы при нажатии пользователем кнопки новые поля ввода, каждое с кнопкой перенаправления, асинхронно вставлялись в неупорядоченный список, это работало до тех пор, пока я не добавил кнопку перенаправления, которая также вставлялась при каждом нажатии кнопки создания. Вот мой JS-код…

 function spawnSilly()
        {
            var div = document.createElement("DIV");
            var input = document.createElement("INPUT");
            var button = document.createElement("BUTTON");
            var att1 = document.createAttribute("type")
            var att2 = document.createAttribute("placeholder")
            var att3 = document.createAttribute("type")
            var att4 = document.createAttribute("onClick")
            att1.value = "text"
            att2.value = "Title"
            att3.value = "button"
            att4.value = "redirect()"
            input.setAttributeNode(att1)
            input.setAttributeNode(att2)
            button.setAttribute(att3)
            button.setAttribute(att4)
            div.appendChild(input)
            div.appendChild(button);

            var list = document.getElementById("spawnList");
            list.insertBefore(div, list.childNodes[0]);
        }
 

Это мой HTML

 <ul id="spawnList">


</ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>
 

Кажется, это кнопка, которая вызывает проблему, но я не могу понять, почему?
Любая помощь была бы потрясающей! Спасибо

Обратите внимание, что setAttribute() принимает два аргумента: name атрибута и value . Используя это правильно, код можно упростить следующим образом:

 function redirect()
{
    console.log("Redirect clicked!");
}

function spawnSilly()
{
    var div = document.createElement("DIV");
    var input = document.createElement("INPUT");
    var button = document.createElement("BUTTON");
    input.setAttribute("type", "text");
    input.setAttribute("placeholder", "Title");
    button.setAttribute("type", "button");
    button.setAttribute("onClick", "redirect()");
    button.innerHTML = "Redirect";
    div.appendChild(input)
    div.appendChild(button);

    var list = document.getElementById("spawnList");
    list.insertBefore(div, list.childNodes[0]);
} 

 .as-console {background-color:black !important; color:lime;} 

 <ul id="spawnList"></ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button> 

setAttribute возьмите два параметра, первый — name атрибут of, а второй value — но у вас есть только один — https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute .

Вместо этого вы можете установить значение для атрибутов с помощью . operator .

Кроме того, вы подключаете вызов функции att4.value = "redirect()" . Итак, всякий раз, когда добавляется кнопка redirect , она будет вызвана. Вместо этого прикрепите callback к redirect , чтобы он вызывался при нажатии кнопки clicked .

 function spawnSilly()
{
    const div = document.createElement("DIV");
    const input = document.createElement("INPUT");
    const button = document.createElement("BUTTON");
    
    input.type = "text";
    input.value = "Title";
    
    button.type ="button";
    button.onclick = redirect;
    button.textContent = "Click Me!";

    div.appendChild(input)
    div.appendChild(button);

    const list = document.getElementById("spawnList");
    list.insertBefore(div, list.childNodes[0]);
}

function redirect() {
    console.log('In redirect');
} 

 <ul id="spawnList">
</ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>