Ich habe eine Schaltfläche erstellt, bei der beim Klicken eine weitere Schaltfläche erstellt wird. Ich bin mir jedoch nicht sicher, wie ein Onclick-Ereignis für diese Schaltfläche erstellt werden soll

function boyFunction(){
    var btn1 = document.createElement("BUTTON");
    var x = document.createTextNode("basketball");
    btn1.appendChild(x);
    document.body.appendChild(btn1);
    btn1.classList.add('btn1');
}

Ich möchte in der Lage sein, auf die Basketball-Schaltfläche zu klicken und diese Schaltfläche ein Bild anzeigen zu lassen

-2
Rimsky Richard 18 Jän. 2019 im 23:20

4 Antworten

Beste Antwort

Drei Dinge mussten getan werden.

Zuerst benötigt Ihr neues Element eine ID

btn1.setAttribute("id", "myButton");

Für Ihr neues Element muss ein Click-Event-Handler erstellt werden

document.getElementById("myButton").addEventListener("click", myButtonClickHandler);

Und dann definieren Sie Ihren Klick-Handler in einer neuen Funktion

function myButtonClickHandler {
// my code
} 

Ihr Code nach der obigen Änderung sieht wie folgt aus:

function boyFunction(){
    var btn1 = document.createElement("BUTTON");
    btn1.setAttribute("id", "myButton");
    var x = document.createTextNode("basketball");
    btn1.appendChild(x);
    document.body.appendChild(btn1);
    btn1.classList.add('btn1');

    document.getElementById("myButton").addEventListener("click", myButtonClickHandler); 
}

function myButtonClickHandler {
// my code
}
0
user1579234 18 Jän. 2019 im 20:31

Sie können einen Click-Handler wie folgt hinzufügen:

document.getElementById('button').onclick = function() {
   alert("button was clicked");
}​;​

Natürlich müssen Sie Ihrer neuen Schaltfläche die ID "Schaltfläche" oder eine andere von Ihnen gewählte ID geben

0
MaZoli 18 Jän. 2019 im 20:26

Sie können dies einfach tun

 function boyFunction(){
        var btn1 = document.createElement("BUTTON");
        btn1.addEventListener('click',()=>console.log('clicked'));
        var x = document.createTextNode("basketball");
        btn1.appendChild(x);
        document.body.appendChild(btn1);
        btn1.classList.add('btn1');
    }
0
Cuong Vu 18 Jän. 2019 im 20:37

Kann so funktionieren:

function boyFunction(){
    var btn1 = document.createElement("BUTTON");

    // your "onclick function" goes here
    btn1.onclick = function () { };

    var x = document.createTextNode("basketball");
    btn1.appendChild(x);
    document.body.appendChild(btn1);
    btn1.classList.add('btn1');
}
0
Vadi 18 Jän. 2019 im 20:39