Question

我正在制作一个15 puzzle而不会操纵给定的html或css文件。

我想添加一个onclick事件，最终会使方块移动，但出于某种原因，我无法在不更改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。

仅使用javascript添加onclick事件

1 个答案: