To Do List using basic JS

Question

I learned javascript from some tutorials and as per advice, I thought of creating some task by my self. I wrote the following code and as I expected I saw the answer. If someone can assist me with how to code better? (The below code will create a table and update rows with input data which user enter)

// Javascript
var input = document.getElementById("input");
var btn   = document.getElementById("btn");
var table = document.getElementById("table");

btn.addEventListener('click', function(){
    var updateTask = input.value;
    // Now create row and add all the inputs value to a table
    var row = table.insertRow(-1);   
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    var allRows = table.querySelectorAll("tr"); 

    cell2.innerHTML = updateTask;
    // Update the Number/Order
    var rowLength = allRows.length;
    if (rowLength > 0){
        cell1.innerHTML = rowLength - 1;
    }
});

<h1>To Do List</h1>
<div class="list-wrapper">
    <input id="input" class="input" type="text" placeholder="Enter here!!!" onfocus="this.value=' ' ">
    <input id="btn" type="submit" value="ADD">
    <table id="table">
        <tr><th>Number</th><th>Task</th></tr>
    </table>



</div>

Answer 1

Querying for row elements

The original code queries for elements with tag name tr:

var allRows = table.querySelectorAll("tr"); 

Just as the code utilizes table methods like insertRow(), the property rows could be used instead:

var allRows = table.rows;

That way there is no DOM query each time the button is clicked.

If there was in fact a need to get all elements with tag name tr, the method Element.getElementsByTagName() could be used, and since it "returns a live HTMLCollection of elements"¹ that could happen outside the click handler (e.g. where the other elements fetched by Id are stored). For more information about the differences refer to answers to this post from 2010 which (at the time) claimed “querySelectorAll("a") is a shocking 98% slower than getElementsByTagName("a")”, as well as answers to What is the difference between querySelector and getElementsByTagName? like Quentin's answer plus this jsPerf test.

inline onfocus handler vs Javascript

The markup contains the text input element with the onfocus attribute:

 <input id="input" class="input" type="text" placeholder="Enter here!!!" onfocus="this.value=' ' ">

Instead of specifying the focus handler in the markup, it can be added in the JavaScript. That way there is a separation between the business logic and the markup. One way to do this is to use Element.addEventListener() to add a callback function whenever an event occurs. See the example code below:

input.addEventListener('focus', function(event) {
    input.value = ' '; // could also use event.target instead of input
});

That way the logic of clearing the value is separated from the markup.