javascript - 仅使用 javascript 添加 onclick 事件

Question

我正在制作一个 15 puzzle无需操作给定的 html 或 css 文件。

我想添加一个 onclick 事件，最终使方 block 移动，但由于某种原因，我无法在不更改 html 文件的情况下让它工作。

我该怎么做才能让 onclick 正常工作？

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

相关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>

Answer 1

这一行:

td.onclick="whenClickedFilled()";

应该是:

td.onclick = whenClickFilled;

对其他作业也进行类似的操作。 onEVENT 属性的值应该是一个函数。字符串可以在 HTML 中使用(HTML 解析器创建一个计算字符串的函数)，但不能在 Javascript 中使用。