Question

我正在为第一个JavaScript项目构建一个简单的扫雷游戏。我在游戏中需要做的是随机创建一个地图，通过JavaScript函数随机分配一个名称（1,2,4，如果是地形，x，如果它是炸弹）到html元素。

我搜索了很多，并了解了如何实际设置名称属性并使用appendText进一步将其打印到表格的<td>（我认为innerHTML也可以细）。

我的问题是数组实际上是随机排序的，但是当我遍历该数组（排序后）以便按照document.getElementById(id).setAttribute("name","something")这样的ID设置hmlt元素的名称时，它不会工作。但据我所知，由于我无法调试，数组正在正确分类。（我用原子开发）我真的不明白为什么代码不能正常工作。

我创建了一个按钮来调用一个函数来创建这样的随机地图：

<button type="button" onclick="shuffle();">Start The game!</button>

 <script type="text/javascript">
  //Randomly sorts the array called numbers
    function shuffle()
     {
    var numbers = [1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,'x','x','x','x',2,2,2,2,2,1,1,2,2];
    for (var i = numbers.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = numbers[i];
            numbers[i] = numbers[j];
            numbers[j] = temp;
        }

//The code below doesn't actually change the name of the element as far as I'm aware, but I can't understand why.
//It should be working and I can't figure out why.
for(var idx = 1; idx <= numbers.length + 1; idx ++)
document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
    }
}
</script>

创建地图后，当用户点击表格单元格时，它应该执行以下操作：

<TABLE>
                <TR>
                    <TD class='terrain' id='1' name="" onclick="scriptPisadela('1');"></TD>
                    <TD class='terrain' id='2' name="" onclick="scriptPisadela('2');"></TD>
                    <TD class='terrain' id='3' name="" onclick="scriptPisadela('3');"></TD>
                    <TD class='terrain' id='4' name="" onclick="scriptPisadela('4');"></TD>
                    <TD class='terrain' id='5' name="" onclick="scriptPisadela('5');"></TD>
                    <TD class='terrain' id='6' name="" onclick="scriptPisadela('6');"></TD>
                    <TD class='terrain' id='7' name="" onclick="scriptPisadela('7');"></TD>
                </TR>

<script type="text/javascript">
        function scriptPisadela(myid){
          var Name = document.getElementById(myid).attributes["name"].value;
            if(Name == 'x') document.getElementById(myid).className = 'bomb';
            else document.getElementById(myid).className = 'livre';
            var td = document.getElementById(myid);
            var text = document.createTextNode(Name);
            td.appendChild(text);
        }
    </script>

//如果元素的名称是炸弹，它应该测试出来，它应该打印出名称。我这样做是因为如果我做了TD class='terrain' id='1' onclick="scriptPisadela('1');">TEXT HERE</TD>这样的事情用户只需按住Ctrl + a即可查看所有元素并赢得游戏。

这里有一个FiddleJs的链接，如果这里有点难以看到，我也会在小提琴上评论代码https://jsfiddle.net/nzgmdf7p/2/

这是实际html文档https://drive.google.com/file/d/0B1xc1ft-s78NVm5FN0lvckhsVVk/view?usp=sharing

的链接

非常感谢任何帮助。

Answer 1

根据你提供的小提琴（纠正语法错误后），我只能看到下面的行

for(var idx = 1; idx <= numbers.length + 1; idx ++)
      document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
 }

你的循环数组直到numbers.length + 1，而number的长度为28。一旦循环超过27，你就会遇到一个错误，因为html中没有这样的元素。

你需要改变

for(var idx = 1; idx < numbers.length; idx ++)
    document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
    }

工作示例：https://plnkr.co/edit/hkdiX1U6G6CWOtE5qdbr?p=preview

Answer 2

首先，由于您是 javascript 的新手，因此学习如何使用 jQuery 让您更轻松，更兼容旧浏览器。

其次，我看到你使用name属性，这是你应该避免的。 name属性主要用于表单字段get / post数据。您应该使用数据属性，然后使用 jQuery .pie-almostComplete { background-color: rgb(255, 207, 51); }函数get / set这些数据。我根据你的代码写了一些东西。

data

jQuery(function($) {

    function scriptPisadela(myid) {
        //var Name = document.getElementById(myid).getAttribute("name");
        var Name = $('#' + myid).data("name");
        if (Name == "x") {
            document.getElementById(myid).className = "bomb";
        } else {
            document.getElementById(myid).className = "livre";
        }
        var td = document.getElementById(myid);
        var text = document.createTextNode(Name);
        td.appendChild(text);
    }

    //Randomly sorts the array called numbers
    function shuffle() {
        var numbers = [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, "x", "x", "x", "x", 2, 2, 2, 2, 2, 1, 1, 2, 2, 2];
        for (var i = numbers.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = numbers[i];
            numbers[i] = numbers[j];
            numbers[j] = temp;
        }

        //The code below doesn"t actually change the name of the element as far as I"m aware, but I can"t understand why.
        //It should be working and I can"t figure out why.
        for (var idx = 1; idx <= numbers.length + 1; idx++) {
            //document.getElementById(idx).setAttribute("name", numbers[idx - 1]);
            $('#' + idx).data("name", numbers[idx - 1]);
        }
    }

    for (var i = 1; i <= 30; i++) {
        $('#mines tr').append(
            $('<td class="terrain" id="' + i + '" data-name=""></td>')
            .on('click', function() {
                scriptPisadela($(this).attr('id'));
            })
        );
    }

    shuffle();
});

table td {
    width:20px;
    height:20px;
    margin: 2px;
    background-color: blue;
    color:#fff;
    text-align:center;
}

只需运行代码段并点击蓝色表格。

Javascript函数不会更改html文档的name属性，因为它应该

2 个答案: