Adding onclick event using only javascript

Question

I'm working on making a 15 puzzle without manipulating the html or css files given.

I want to add an onclick event which will eventually make the squares move, but for some reason I can't get it to work without changing the html file.

What can I do to get onclick to work?

js:

//grid created on load
function loading () {    
    var bigBox = document.getElementById("puzzlearea");
    bigBox.style.marginTop = "-50px";
    document.getElementById("controls").style.marginTop = "75px";

    function nameBox () {
        var divs = bigBox.getElementsByTagName("div");

        for (var i = 0; i < divs.length; i++) {
            divs[i].className = "puzzlepiece";
            divs[i].style.backgroundImage = "url(\"images/background_" + (i + 1) + ".jpg\")";
        }

        return divs;
    }

    function tableCreate () {
        var body = document.getElementById('puzzlearea'),
            tbl  = document.createElement('table'),
            boxes = nameBox();

        // I would recommend removing this block and simply setting these
        // style attributes in CSS under an id that you give to your table
        tbl.style.width = '400px';
        tbl.style.height = '400px';
        tbl.cellPadding = '0';
        tbl.cellSpacing = '0';
        tbl.setAttribute('border', '0');

        var tbdy = document.createElement('tbody');
        for (var i = 0; i < 4; i++) {
            var tr = document.createElement('tr');

            for (var j = 0; j < 4; j++) {
                var td = document.createElement('td');

                if(j <= boxes.length + 1){
                    td.appendChild([].shift.call(boxes));
                    td.onclick="whenClickedFilled()";
                    tr.appendChild(td)
                } else {
                    var emptyDiv = document.createElement('div');
                    var empty_td = document.createElement('td');
                    empty_td.appendChild(emptyDiv);
                    tr.appendChild(empty_td);
                    emptyDiv.className = "puzzlepiece emptyDivClass";
                    emptyDiv.id = "empty"
                    emptyDiv.style.backgroundColor = "#c0c0c0";
                    emptyDiv.style.backgroundImage = "none";
                    emptyDiv.style.border = "none";
                    emptyDiv.style.width = "100px";
                    emptyDiv.style.height = "100px";
                    empty_td.onclick="whenClickedEmpty()";
                }                
            }
            tbdy.appendChild(tr);
        }
        tbl.appendChild(tbdy);
        body.appendChild(tbl)

        var tds = bigBox.getElementsByTagName("td");
        for (var i = 0; i < 16 ; i++) {
            tds[i].id = "box"+(i+1);
            tds[i].firstElementChild.id = "filled";
        }
    }
    tableCreate();

    //differentiate between empty square and boxes

    function move(){
        var bigBox = document.getElementById("puzzlearea");
        var divs = bigBox.getElementsByTagName("div");

        divs.onclick = function whenClickedFilled(){
            console.log("filled");

        }

    }

};

window.onload = function () {
    loading();
};

relevant html:

    <div id="overall">
        <div id="puzzlearea">
            <!-- the following are the fifteen puzzle pieces -->
            <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
            <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
            <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
            <div>13</div> <div>14</div> <div>15</div>
        </div>

        <div id="controls">
        <button id="shufflebutton">Shuffle</button>
        </div>
    </div>

You've posted a lot of code. Define "can't get it to work." What happens? What should happen? Etc. — Mitya
– Mitya, Commented Jun 10, 2014 at 21:56
When you assign td.onclick you have to assign a function, not a string. — Barmar
– Barmar, Commented Jun 10, 2014 at 21:56
You should be using addEventListener, not onload or onclick. — David Bradbury
– David Bradbury, Commented Jun 10, 2014 at 22:00

Barmar · Accepted Answer · 2014-06-10 21:58:42Z

2

This line:

td.onclick="whenClickedFilled()";

should be:

td.onclick = whenClickFilled;

And do it similarly for other assignments. The value of an onEVENT property should be a function. Strings can be used in HTML (the HTML parser creates a function that evaluates the string), but not Javascript.

answered Jun 10, 2014 at 21:58

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Bradbury Over a year ago

It should be td.addEventListener("click", whenClickFilled);

pmrotule Over a year ago

Or if you have variables go with td.onclick = function(){ whenClickFilled(var); };

Collectives™ on Stack Overflow

Adding onclick event using only javascript

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related