Графические компоненты
Добрый день. Нужна помощь. Имеется код
function Menu(options) { var elem; function getElem() { if (!elem) render(); return elem; } function render() { elem = document.createElement('div'); elem.className = "menu"; var titleElem = document.createElement('span'); elem.appendChild(titleElem); titleElem.className = "title"; titleElem.textContent = options.title; elem.onmousedown = function() { return false; }; elem.onclick = function(event) { if (event.target.closest('.title')) { toggle(); } } } function renderItems() { var items = options.items || []; var list = document.createElement('ul'); items.forEach(function(item) { var li = document.createElement('li'); li.textContent = item; list.appendChild(li); }); elem.appendChild(list); } function open() { if (!elem.querySelector('ul')) { renderItems(); } elem.classList.add('open'); }; function close() { elem.classList.remove('open'); }; function toggle() { if (elem.classList.contains('open')) close(); else open(); }; var input=document.createElement('input'); input.type = 'text'; input.id = "ff1"; document.body.appendChild(input); function add(){ input = document.getElementById('ff1'); var mas = []; mas.push(input.value + ","); //добавляем значение инпута в массив document.body.innerHTML +=mas[0]; } this.getElem = getElem; this.toggle = toggle; this.close = close; this.open = open; this.add = add; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script> <script src="menu.js"></script> </head> <body> <button onclick="menu.toggle()">menu.toggle()</button> <button onclick="menu.open()">menu.open()</button> <button onclick="menu.close()">menu.close()</button> <button onclick="menu.add()">menu.add()</button> <script> var menu = new Menu({ title: "Сладости", items: [ "Торт", "Пончик", "Пирожное", "Шоколадка", "Мороженое", ] }); document.body.appendChild(menu.getElem()); </script> </body> </html> Необходимо добавить компоненту возможность добавлять и удалять сладости. Добавление осуществить через ввод в input названия сладости. Удалять последнюю добавленную сладость. |
Часовой пояс GMT +3, время: 10:56. |