Nsryjdtyk

I am attempting to make a JavaScript To-Do list app with an Array, push method, removeChild method, and a keydown function. I want the user to be able to use both the add button and the enter key to enter input. I succeeded in making an app that ultimately has 2 functions with 2 similar sets of variables and DOM methods: one for add button and another for keydown function (when the user hits enter after adding input). This setup seems to work fine. However, I would like to know if it is possible to create a ONE function that facilitates both the Add button AND the keydown function with one set of DOM methods. If so, could someone please provide a potential demo? Thanks!

(The following demo contains Bootstrap classes)

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>

Since you already have the necessary logic wrapped into a single add() function, why don't you just call it in your keydown event listener the same way you were calling it from your button's onclick listener?

document.getElementById("task").addEventListener("keydown", function(event) {

  if (event.which == 13) {

    add();

  }

});

As a side note, the way you wrote your code, you didn't have to name your btn2/ task2/etc variables distinctly from btn/task/etc - they are only visible inside their functions' scopes. Inside the { } that is.
Anyway, here's a working snippet:

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>

this works.

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();

}

You don't need to add the click handler in the HTML. This solution adds the listeners via the 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>