Di halaman html saya, saya memiliki tombol yang membuat tombol lain saat diklik. Tombol yang dibuat itu membuat paragraf saat diklik tetapi yang ini hanya berfungsi sekali. Ada dua fungsi di dalam satu sama lain yang, menurut saya, adalah penyebab masalahnya. Apa cara yang lebih baik untuk melakukan ini?

Menulis fungsi bagian dalam yang terpisah dari yang berisi memberi saya kesalahan karena id yang coba diakses oleh bagian dalam tidak ada sampai yang berisi dipanggil/tombol asli diklik.

// 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!);
    }
}

Tidak ada kesalahan.

0
user12287130 28 Oktober 2019, 20:20

2 jawaban

Jawaban Terbaik

Masalahnya ada di targetElement.innerHTML = targetElement.innerHTML di mana Anda mengganti HTML asli yang memiliki acara DOM (klik) yang dilampirkan dengan HTML baru dan tidak melampirkan acara lagi.

1
Klímačka 28 Oktober 2019, 17:24

Anda dapat mencoba membuat fungsi lain untuk menangani ini.

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 Oktober 2019, 17:31