JavaScript создать второе событие из первого события - PullRequest
Новая
       0

JavaScript создать второе событие из первого события

2 голосов
/ 09 января 2020

Я хочу создать второе событие из кнопки, которую я создал из первого события. я не знаю, как получить кнопку с идентификатором btn_event_2 и сохранить ее в переменную, как я только что сделал для первого события, поэтому я не могу создать прослушиватель событий для второй кнопки. Любое предложение, спасибо. 

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>

Ответы [ 3 ]

2 голосов
/ 09 января 2020

Простое использование addEventListener для новой созданной кнопки, как вы уже сделали начальную. 

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>
0 голосов
/ 09 января 2020

Лучший подходящий способ сделать это - использовать JavaScript event delegation u создать добавить список событий в зависимости от вашего события и назначить функцию внутри этой функции; вы проверите свой идентификатор кнопки, если он совпадает, тогда вы сделаете все остальное 

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>
0 голосов
/ 09 января 2020

Вы можете просто прикрепить прослушиватель событий к новой кнопке, поскольку у вас уже есть ссылка на новую кнопку в функции createElement. 

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();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...