Как сделать список задач JavaScript с помощью функции keydown - PullRequest
Новая
       10

Как сделать список задач JavaScript с помощью функции keydown

0 голосов
/ 17 ноября 2018

Я пытаюсь создать приложение со списком дел в JavaScript с помощью массива, метода push, метода removeChild и функции keydown. Я хочу, чтобы пользователь мог использовать и кнопку добавления, и клавишу ввода для ввода ввода. Мне удалось создать приложение, которое в конечном итоге имеет 2 функции с 2 одинаковыми наборами переменных и методами DOM: одно для кнопки добавления, а другое для функции нажатия клавиш (когда пользователь нажимает клавишу ввода после добавления ввода). Эта настройка, кажется, работает нормально. Тем не менее, я хотел бы знать, возможно ли создать ОДНУ функцию, которая облегчает как кнопку Add, так и функцию keydown с одним набором методов DOM. Если да, может кто-нибудь представить потенциальную демоверсию? Спасибо!

(Следующая демонстрация содержит классы Bootstrap)

JS: 

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);
  var text = document.createTextNode(task);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("x"));
  btn.setAttribute("onclick", "remove()");
  btn.setAttribute("class", "btn-primary btn-sm newBtn");
  li.appendChild(text);
  li.appendChild(btn);
  document.getElementById("myUl").appendChild(li);
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  document.getElementById("myUl").removeChild(task);
}

document.getElementById("task").addEventListener("keydown", function(event) {
  if (event.which == 13) {
    var task2 = document.getElementById("task").value;
    array.push(task2);
    var text2 = document.createTextNode(task2);
    var li2 = document.createElement("li");
    var btn2 = document.createElement("button");
    btn2.appendChild(document.createTextNode("x"));
    btn2.setAttribute("onclick", "remove()");
    btn2.setAttribute("class", "btn-primary btn-sm newBtn");
    li2.appendChild(text2);
    li2.appendChild(btn2);
    document.getElementById("myUl").appendChild(li2);
  }
});

HTML: 

<div class="mainDiv">
  <input id="task" class="input-lg">
  <button id="inputBtn" class="btn-primary btn-lg" onclick="add()">add</button>
</div>
<ul id="myUl"></ul>

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

это работает. 

var array = [];

// add the event listeners.
document.querySelector("#inputBtn").addEventListener("click", createToDO);
document.querySelector("#task").addEventListener("keydown", createToDO);

function createToDO(e) {
    var eventNum = e.which; //grab the event number

    if (eventNum === 1 || eventNum === 13) { // checks for both the button press and enter
        var li = document.createElement("li"),
            btn = document.createElement("button"),
            task = document.getElementById("task").value,
            text = document.createTextNode(task);

        array.push(task);
        btn.appendChild(document.createTextNode("Remove"));
        btn.addEventListener("click", remove);
        btn.setAttribute("class", "btn-primary btn-sm newBtn");
        li.appendChild(text);
        li.appendChild(btn);
        document.querySelector("#myUl").appendChild(li);
    }
}

function remove(e) {
    var task = e.target.parentElement;
    task.remove();
}

Вам не нужно добавлять обработчик кликов в HTML.Это решение добавляет слушателей через JavaScript.

<div class="mainDiv">
        <input id="task" class="input-lg">
        <!-- <button id="inputBtn" class="btn-primary btn-lg" onclick="add()">add</button> -->
        <button id="inputBtn" class="btn-primary btn-lg">add</button>
    </div>
    <ul id="myUl"></ul>
0 голосов
/ 18 ноября 2018

Поскольку у вас уже есть необходимая логика, заключенная в одну add() функцию, почему бы вам просто не вызвать ее в вашем keydown слушателе событий так же, как вы вызывали ее из onclick слушателя вашей кнопки? 

document.getElementById("task").addEventListener("keydown", function(event) {
  if (event.which == 13) {
    add();
  }
});

В качестве примечания: при написании кода вам не нужно было указывать переменные btn2 / task2 / etc отдельно от btn / task / etc -они видны только в пределах своих функций.Внутри { } то есть.В любом случае, вот рабочий фрагмент: 

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);
  var text = document.createTextNode(task);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("x"));
  btn.setAttribute("onclick", "remove()");
  btn.setAttribute("class", "btn-primary btn-sm newBtn");
  li.appendChild(text);
  li.appendChild(btn);
  document.getElementById("myUl").appendChild(li);
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  document.getElementById("myUl").removeChild(task);
}

document.getElementById("task").addEventListener("keydown", function(event) {
  if (event.which == 13) {
    add()
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainDiv">
  <input id="task" class="input-lg">
  <button id="inputBtn" class="btn-primary btn-lg" onclick="add()">add</button>
</div>
<ul id="myUl"></ul>
...