Форум

marc · #1 (**permalink**) 17.02.2018, 17:43

Здравствуйте, помогите с задачей пожалуйста. Надо создать кастомное событие, которое будет происходить при нажатии на кнопку "btn-generate"(вызывается событие на элементе ul). При этом к списку ul каждый раз добавляется li с текстом "Item" + номер li(Item 3, Item 4...) А хранить номер последнего добавленного Item в свойстве counter который в event(использовать как счётчик для Item).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn-msg">Show message</button>
<button id="btn-generate">Generate item</button>
<p><strong id="tag">Tag:</strong></p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
 
 
 
<script src="main.js"></script>
</body>
</html>

рони · #2 (**permalink**) 17.02.2018, 19:08

marc,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn-msg">Show message</button>
<button id="btn-generate">Generate item</button>
<p><strong id="tag">Tag:</strong></p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>



<script>
window.addEventListener("DOMContentLoaded", function() {
    var ul = document.querySelector("ul"),
        btn = document.querySelector("#btn-generate");
    btn.addEventListener("click", function(e) {
        ul.dispatchEvent(myEvent);
    });
    ul.addEventListener("addItem", function(e) {
        this.appendChild(e.detail.li);
    });
    var myEvent = new CustomEvent("addItem", {
        detail: {
            counter: 2,
            get li() {
                var node = document.createElement("li");
                node.appendChild(document.createTextNode("Item " + ++this.counter));
                return node;
            }
        },
        bubbles: true,
        cancelable: false
    });
});
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript