Function call with button in Javascript

Question

I have a problem with my implementation of a button meant to add functionality to a piece of code. It seems to be working, but why do the Date and Checkbox elements not behave like the ones in the first row?

It should calculate the difference in the date and cross the other <td>. I need to call the Date and Checkbox properties with my add button.

My code is below. How can I fix it? Thank you for your time.

<!DOCTYPE html>
<html>
<head>
<title></title>

<style>
    table {
        border-collapse: collapse;
        margin: 100px;
    }

    table,
    td,
    th {
        border: 1px solid black;
        padding: 10px;
    }

        table td.crossed {
            background-image: -webkit-linear-gradient(top left, transparent, red, transparent);
            background-image: -moz-linear-gradient(top left, transparent, red, transparent);
            background-image: -o-linear-gradient(top left, transparent, red, transparent);
            background-image: linear-gradient(to bottom right, transparent, red, transparent);
        }
</style>
</head>
<body>
<table id="t1">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>
            <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="addRow()" />
        </th>
    </tr>

    <tr>
        <td>1.</td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="date" id="mydate">
        </td>
        <td contenteditable='true'></td>
        <td>
            <input type="button" value="Delete Row" onclick="deleteRow(this)" />
        </td>
    </tr>
</table>
<script>
    function createRowColumn(row) {
        var column = document.createElement("td");
        row.appendChild(column);
        return column;
    }


    function addRow() {
        var newrow = document.createElement("tr");
        var numericColumn = createRowColumn(newrow);
        var checkColumn = createRowColumn(newrow);
        var dateColumn = createRowColumn(newrow);
        var emptyColumn = createRowColumn(newrow);
        var removeColumn = createRowColumn(newrow);

        var checkbox = document.createElement("input");
        checkbox.setAttribute("type", "checkbox");
        checkColumn.appendChild(checkbox);

        var datebox = document.createElement("input");
        datebox.setAttribute("type", "date");

        dateColumn.appendChild(datebox);

        emptyColumn.setAttribute("contenteditable", "true");

        var remove = document.createElement("input");
        remove.setAttribute("type", "button");
        remove.setAttribute("value", "Delete Row");
        remove.setAttribute("onClick", "deleteRow(this)");
        removeColumn.appendChild(remove);

        var table = document.getElementById('t1');
        var tbody = table.querySelector('tbody') || table;
        var count = tbody.getElementsByTagName('tr').length;
        numericColumn.innerText = count.toLocaleString() + '.';

        tbody.appendChild(newrow);
    }

    function deleteRow(button) {
        var row = button.parentNode.parentNode;
        var tbody = row.parentNode;
        tbody.removeChild(row);


        var rows = tbody.getElementsByTagName("tr");
        for (var i = 1; i < rows.length; i++) {
            var currentRow = rows[i];
            currentRow.childNodes[0].innerText = i.toLocaleString() + '.';
        }

    }
    var cb = document.querySelectorAll('input[type="checkbox"]')[0];
    var td = document.querySelectorAll("td[contenteditable]")[0];

    cb.addEventListener("click", function () {
        if (cb.checked) td.classList.add("crossed");
        else td.classList.remove("crossed");
    });

    window.onload = function () {
        document.getElementById('mydate').onchange = function () {
            var selectedDateFromCalendar = new Date(this.value);

            var currentdate = new Date();

            var Diff = new Date(selectedDateFromCalendar) - currentdate;

            var diffDays = Math.ceil(Diff / (1000 * 3600 * 24));

            if ((selectedDateFromCalendar) - currentdate < 0) {
                alert("out of date");
            }
            else if ((selectedDateFromCalendar) - currentdate >= 1) {
                alert("last " + diffDays + " day");
            }
        }
    }
</script>
</body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 12:23

Because you take element by id! getElementById and id's are unique!! Your jQuery is stuck on the first id.. it can't recognise the other. Try using multiple id's or classes!!

Big edit here:

Well, sorry for the time but I had some work and no time for Stack. Your problem is a bit tricky if you don't want to "loop and mess with the multiple classes" you can get some reference about that here

So using the above QA, here is following snippet for the tricky solution, where we have to "add and fire" events in each new dynamically created element.

Check that I added 'myclass' not only in the first row but and on the following dynamically created ones!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src='jquery-2.1.1.min.js'></script>

    <style>
        table {
            border-collapse: collapse;
            margin: 100px;
        }

        table,
        td,
        th {
            border: 1px solid black;
            padding: 10px;
        }

        table td.crossed {
            background-image: -webkit-linear-gradient(top left, transparent, red, transparent);
            background-image: -moz-linear-gradient(top left, transparent, red, transparent);
            background-image: -o-linear-gradient(top left, transparent, red, transparent);
            background-image: linear-gradient(to bottom right, transparent, red, transparent);
        }
    </style>
</head>
<body>
<table id="t1">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>
            <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="addRow()" />
        </th>
    </tr>

    <tr>
        <td>1.</td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="date" id="mydate" class="myclass">
        </td>
        <td contenteditable='true'></td>
        <td>
            <input type="button" value="Delete Row" onclick="deleteRow(this)" />
        </td>
    </tr>
</table>
<script>
    function createRowColumn(row) {
        var column = document.createElement("td");
        row.appendChild(column);
        return column;
    }


    function addRow() {
        var newrow = document.createElement("tr");
        var numericColumn = createRowColumn(newrow);
        var checkColumn = createRowColumn(newrow);
        var dateColumn = createRowColumn(newrow);
        var emptyColumn = createRowColumn(newrow);
        var removeColumn = createRowColumn(newrow);

        var checkbox = document.createElement("input");
        checkbox.setAttribute("type", "checkbox");
        checkColumn.appendChild(checkbox);

        var datebox = document.createElement("input");
        datebox.setAttribute("type", "date");
        datebox.setAttribute("class", "myclass");

        dateColumn.appendChild(datebox);

        emptyColumn.setAttribute("contenteditable", "true");

        var remove = document.createElement("input");
        remove.setAttribute("type", "button");
        remove.setAttribute("value", "Delete Row");
        remove.setAttribute("onClick", "deleteRow(this)");
        removeColumn.appendChild(remove);

        var table = document.getElementById('t1');
        var tbody = table.querySelector('tbody') || table;
        var count = tbody.getElementsByTagName('tr').length;
        numericColumn.innerText = count.toLocaleString() + '.';

        tbody.appendChild(newrow);
    }

    function deleteRow(button) {
        var row = button.parentNode.parentNode;
        var tbody = row.parentNode;
        tbody.removeChild(row);


        var rows = tbody.getElementsByTagName("tr");
        for (var i = 1; i < rows.length; i++) {
            var currentRow = rows[i];
            currentRow.childNodes[0].innerText = i.toLocaleString() + '.';
        }

    }
    var cb = document.querySelectorAll('input[type="checkbox"]')[0];
    var td = document.querySelectorAll("td[contenteditable]")[0];

    cb.addEventListener("click", function () {
        if (cb.checked) td.classList.add("crossed");
        else td.classList.remove("crossed");
    });

    function hasClass(elem, className) {
        return elem.className.split(' ').indexOf(className) > -1;
    }

    document.addEventListener('change', function (e) {
        if (hasClass(e.target, 'myclass')) {
            var selectedDateFromCalendar = new Date(e.target.value);

            var currentdate = new Date();

            var Diff = new Date(selectedDateFromCalendar) - currentdate;

            var diffDays = Math.ceil(Diff / (1000 * 3600 * 24));

            if ((selectedDateFromCalendar) - currentdate < 0) {
                alert("out of date");
            }
            else if ((selectedDateFromCalendar) - currentdate >= 1) {
                alert("last " + diffDays + " day");
            }
        }

    }, false);

</script>
</body>
</html>

with help from ram swaroop , Dave and Sime Vidas

have a nice day!

do I use document.querySelectorAll() for solving my problem? @user5626587 — user5695111, Dec 22 '15 at 20:03

Function call with button in Javascript

1 Answers1