JavaScript crée un deuxième événement à partir du premier événement

Question

JavaScript crée un deuxième événement à partir du premier événement

Demandé el 9 de Janvier, 2020: Quand la question a-t-elle été
84 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux créer un deuxième événement à partir d'un bouton que j'ai créé à partir du premier événement. Je ne sais pas comment saisir le bouton avec un identifiant. btn_event_2 et l'enregistrer dans une variable comme je viens de le faire pour le premier événement, de sorte que je ne peux pas créer un écouteur d'événement sur le deuxième bouton. Merci de vos conseils.

let btnEvent1 = document.getElementById("btn_event_1");
let sectionA = document.getElementById("eventDemo");

function createElements(){
  let newHeader = document.createElement("h1");
  let newButton = document.createElement("button");
  let newHeaderContent = document.createTextNode("Hello World 2");
  let newButtonContent = document.createTextNode("click me");
  newHeader.appendChild(newHeaderContent);
  newButton.appendChild(newButtonContent);
  newButton.setAttribute("type", "button");
  newButton.setAttribute("id", "btn_event_2");
  sectionA.appendChild(newHeader);
  sectionA.appendChild(newButton);
}

btnEvent1.addEventListener("click", function(){
createElements();
});

   <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Event Demo 3</title>
        </head>

        <body>
            <section id="eventDemo">
                <h1>Hello World</h1>
                <button type="button" id="btn_event_1">click me</button>
            </section>
        </body>

        <script src="demoEvent.js"></script>
    </html>

Demandé el 9 de Janvier, 2020 par Fariza Adiatma

Answer 1

3 Réponses

Answer 2

2voto

Nikola Lukic Points 22

Il suffit d'utiliser addEventListener pour le nouveau bouton créé, comme vous le faites déjà initialement.

let btnEvent1 = document.getElementById("btn_event_1");
let sectionA = document.getElementById("eventDemo");

let counter = 1;

function createElements() {
  let newHeader = document.createElement("h1");
  let newButton = document.createElement("button");
  let newHeaderContent = document.createTextNode("Hello World " + counter );
  let newButtonContent = document.createTextNode("click me");
  newHeader.appendChild(newHeaderContent);
  newButton.appendChild(newButtonContent);
  newButton.setAttribute("type", "button");
  // Important update: id value always come with different data
  newButton.setAttribute("id", "btn_event_" + counter);
  newButton.addEventListener("click", function(){
    createElements();
  });
  sectionA.appendChild(newHeader);
  sectionA.appendChild(newButton);
  counter++
}

btnEvent1.addEventListener("click", function(){
createElements();
});

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Event Demo 3</title>
            <style>
              h1 {
                color: rgba(0,0,0,.6);
                background: #6e6e6e;
                text-shadow: 3px 2px 3px rgba(255,255,255,.2);
              }
              button {
                -webkit-box-shadow: 5px 5px 15px 5px #000000; 
                box-shadow: 5px 5px 15px 5px #000000;
                border: 5px solid #1C6EA4;
                border-radius: 40px 39px 40px 40px;
              }
            </style>
        </head>

        <body>
            <section id="eventDemo">
                <h1>Hello World</h1>
                <button type="button" id="btn_event_1">click me</button>
            </section>
        </body>

        <script src="demoEvent.js"></script>
    </html>

Répondu el 9 de Janvier, 2020 par Nikola Lukic (22 Points )

Answer 3

0voto

nijeesh joshy Points 408

Vous pouvez simplement attacher un event-listener au newbutton puisque vous avez déjà une référence au newbutton dans le fichier createElement fonction.

let btnEvent1 = document.getElementById("btn_event_1");
let sectionA = document.getElementById("eventDemo");

function createElements() {
  let newHeader = document.createElement("h1");
  let newButton = document.createElement("button");
  let newHeaderContent = document.createTextNode("Hello World 2");
  let newButtonContent = document.createTextNode("click me");
  newHeader.appendChild(newHeaderContent);
  newButton.appendChild(newButtonContent);
  newButton.setAttribute("type", "button");
  newButton.setAttribute("id", "btn_event_2");
  sectionA.appendChild(newHeader);
  sectionA.appendChild(newButton);

  newButton.addEventListener("click", function() {
    console.log('new button clicked')
  });
}

btnEvent1.addEventListener("click", function() {
  createElements();
});

Répondu el 9 de Janvier, 2020 par nijeesh joshy (408 Points )

Answer 4

0voto

sayalok Points 834

La meilleure façon de procéder est d'utiliser JavaScript event delegation Vous créez un partenaire d'événement dépendant de votre événement et vous lui attribuez une fonction. dans cette fonction, vous vérifiez l'identifiant de votre bouton s'il correspond, vous faites le reste

let btnEvent1 = document.getElementById("btn_event_1");
let sectionA = document.getElementById("eventDemo");

function createElements(){
    let newHeader = document.createElement("h1");
    let newButton = document.createElement("button");
    let newHeaderContent = document.createTextNode("Hello World 2");
    let newButtonContent = document.createTextNode("click me");
    newHeader.appendChild(newHeaderContent);
    newButton.appendChild(newButtonContent);
    newButton.setAttribute("type", "button");
    newButton.setAttribute("id", "btn_event_2");
    sectionA.appendChild(newHeader);
    sectionA.appendChild(newButton);
}

btnEvent1.addEventListener("click", function(){
    createElements();
});

document.addEventListener('click',clickEventTwo)
function clickEventTwo(e) {
      if(e.target && e.target.id == 'btn_event_2') {
        alert('two')
      }
}

 <section id="eventDemo">
      <h1>Hello World</h1>
      <button type="button" id="btn_event_1">click me</button>
  </section>

Répondu el 9 de Janvier, 2020 par sayalok (834 Points )

JavaScript crée un deuxième événement à partir du premier événement

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

JavaScript crée un deuxième événement à partir du premier événement

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: