Функция внутри другой функции работает только один раз

Question

На моей странице HTML у меня есть кнопка, которая создает другую кнопку при нажатии. Эта созданная кнопка создает абзац при нажатии, но этот работает только один раз. Это две функции внутри друг друга, что, я думаю, является причиной проблемы. Что было бы лучшим способом сделать это?

Написание внутренней функции отдельно от содержащей ее дает мне ошибку, поскольку идентификатор, к которому пытается обратиться внутренняя, не существует, пока не будет вызвана содержащая функция / нажата исходная кнопка.

// Containing function

document.getElementById("buttonCreator").onclick=function() {

    targetElement.innerHTML = (""); // Reset the main divs contents
    var button1 = document.createElement("button"); // Create a button
    var bContent = document.createTextNode("Click me!");
    button1.appendChild(bContent);
    button1.setAttribute("id", "createdButton"); // Give the button an id 
    targetElement.appendChild(button1);

// Inner function - this only works once

    document.getElementById("createdButton").onclick=function() { 

        targetElement.innerHTML = targetElement.innerHTML 
        + "<br> <br>" 
        + ("You clicked the created button!);
    }
}

Там нет ошибок.

javascript html

0

user12287130 28 Окт 2019 в 20:20

Answer 1

Проблема в targetElement.innerHTML = targetElement.innerHTML, где вы заменяете исходный HTML-код, к которому прикреплено событие DOM (щелчок), новым HTML-кодом и больше не присоединяете это событие.

1

Klímačka 28 Окт 2019 в 17:24

Answer 2

Вы можете попытаться создать другую функцию, чтобы справиться с этим.

document.getElementById("buttonCreator").onclick=function() {

    targetElement.innerHTML = (""); // Reset the main divs contents
    var button1 = document.createElement("button"); // Create a button
    var bContent = document.createTextNode("Click me!");
    button1.appendChild(bContent);
    button1.setAttribute("id", "createdButton"); // Give the button an id 
    targetElement.appendChild(button1);

    button1.addEventListener('click', () => {
        clickCreatedButton(targetElement, button1);
    })
}

function clickCreatedButton(targetElement, button) {
    button.addEventListener('click', () => {
        targetElement.innerHTML = targetElement.innerHTML 
        + "<br> <br>" 
        + ("You clicked the created button!");
    })
}

0

KletskovG 28 Окт 2019 в 17:31

Функция внутри другой функции работает только один раз

2 ответа

Похожие вопросы

Новые вопросы

javascript