Search code examples
javascripthtmlinnerhtml

Change innerHTML from within cell

I'm making a page with a table where each td can be edited by clicking.

the onclick of each td is the following js function:

var createInput = function (e) {
    e.innerHTML = "<button id = 'option1' onclick = updateComplete(this)><span>Complete</span></button><button id = 'option2' onclick = updatePartial()><span>Partial</span></button>";
    setRowHeights(); //not important
}

so the td ends up looking like this:

<td title="Y" id="0:2" onclick="createInput(this)" class="options">
    <button id="option1" onclick="updateComplete(this)">
        <span>Complete</span>
    </button>
    <button id="option2" onclick="updatePartial()">
        <span>Partial</span>
    </button>
</td>

if the "complete" button is clicked i want the innerHTML of the whole cell to change so that it just says the word "complete":

var updateComplete = function (e) {
    var cell = e.parentElement
    cell.innerHTML = "complete";
}

However, this doesn't work. Nothing happens except when i'm viewing the elements in Chrome, the tags of td and buttons glow pink:

enter image description here

However,

if i do the first clcik on the td so the buttons appear, then run this other function which explicitly references the id of the cell...

var updateCompleteOther = function () {
    var cell = document.getElementById("0:2");
    cell.innerHTML = "complete";
}

...it works.

Why can't i change the innerHTML of the td from a button inside the td?

Solution

  • Have created a fiddle for you at : https://jsfiddle.net/szn21qcx/

    What you are missing is event.stopPropagation();

    Its prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

    function updateComplete (e, ctrl) {
    var cell = ctrl.parentElement;
    cell.innerHTML = "complete";
    e.stopPropagation();
}

    You can read more about event propagation from here