Javascript 将数组值指定给表单元格_Javascript_Arrays_Html Table

Javascript 将数组值指定给表单元格

javascript arrays

Javascript 将数组值指定给表单元格,javascript,arrays,html-table,Javascript,Arrays,Html Table,我试图用Javascript创建一个简单的内存游戏，我创建了一个字母数组来匹配游戏。然而，我很难弄清楚如何将一个字母分配给表中用作棋盘的每个单元格 <html> <head> <style> td { background-color: red; width:100px; height:100px; border:1px solid black } </sty

我试图用Javascript创建一个简单的内存游戏，我创建了一个字母数组来匹配游戏。然而，我很难弄清楚如何将一个字母分配给表中用作棋盘的每个单元格

<html>
<head>
    <style>
    td {
        background-color: red;
        width:100px;
        height:100px;
        border:1px solid black
    }
    </style>
    <table>
        <tr>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
        </tr>
        <tr>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
        </tr>
        <tr>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
        </tr>
        <tr>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
            <td id = "tile" onClick = "revealLetter()"></td>
        </tr>
    </table>
<script>
var letters = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H'];
var square_values = [];
var square_ids = [];
var i = letters.length, j, temp;
while(--i > 0) {
    j = Math.floor(Math.random() * (i+1));
    temp = letters[j];
    letters[j] = letters[i];
    letters[i] = temp;
}

</script>
</head>
<body>

</body>
</html>


运输署{
背景色：红色；
宽度：100px；
高度：100px；
边框：1px纯黑
}
变量字母=['A'、'A'、'B'、'C'、'C'、'D'、'D'、'E'、'F'、'F'、'G'、'G'、'H']；
var平方_值=[]；
var square_ids=[]；
变量i=字母长度，j，温度；
而（--i>0）{
j=数学地板（数学随机（）*（i+1））；
温度=字母[j]；
字母[j]=字母[i]；
字母[i]=临时工；
}

我建议采用稍微不同的方法。我编写了一个基于随机数组构建网格的函数，而不是构建表格然后输入字母。我借用了一个函数来随机化数组。然后我添加了事件侦听器，通过将它们的值更改为

数据字母

属性来“翻转”卡片

我没有写游戏逻辑的其余部分-我不想踩到你的脚！很明显，你希望这样做，如果你翻过两个不匹配的，它们会返回，然后你再试一次，但是如果它们这样做了，它们会继续显示-我相信你可以使用逻辑并修改我添加事件侦听器的函数

buildGrid（）；
//全球的
变量a，b=“”；
函数buildGrid（）{
变量字母=['A'，'A'，'B'，'C'，'C'，'D'，'D'，'E'，'E'，'F'，'F'，'G'，'G'，'H'，'H']；
随机变量=随机（字母）；
var num_字母=随机长度；
var str_tbl=''；
而（字母数>=4）{
str_tbl+=''；
对于（变量i=0；i<4；i++）{
str_tbl+='？'；
}
str_tbl+=''；
ranomdised=随机拼接（0,4）；
字母数-=4；
}
var tbl=document.createElement（'table'）；
tbl.innerHTML=str_tbl；
document.getElementsByClassName（'grid'）[0].appendChild（tbl）；
addEventListeners（）；
}
函数addEventListeners（）{
var tds=document.getElementsByTagName（'td'）；
对于（变量i=0；i


td{
背景色：#中交；
文本对齐：居中；
填充：20px；
高度：100px；
宽度：100px；
颜色：#333333；
字体系列：helvetica、arial、无衬线字体；
字体大小：30px；
字体大小：粗体；
光标：指针；
}
td:悬停{
背景色：#dddddd；
}
选择td{
背景颜色：浅蓝色；
}
您需要将参数从单击表格传递到单击处理程序代码，以指示已单击的表格元素及其在字母数组中的位置
有很多方法可以做到这一点，包括使用事件对象，但这里有一个简单的想法
删除所有id属性。无论如何，它们都不应该被复制
更改每个“onclick=”代码片段以发送已单击的元素和要使用的下标。所以“onclick”规范看起来像
onclick="revealLetter( this, 0)"
// through to
onclick="revealLetter( this, 15)"


然后编码revalletter
将其作为参数：
function revealLetter( tdElement, subscript) {
// where tdElement is the table data element clicked, and
// subscript is a subscript to look its letter up in an array
// ... insert code here

如上所述，有很多方法可以做到这一点，但您可以使用这个相当简单的方法，同时获得更多的经验
比如说，如果你没有听说过，不要忘了查找“innerHTML”和“textContent”。（它们是HTML元素的属性）
是否有错误？与其让它用来解析代码，不如试着更具体地说明什么是有效的，什么是无效的。请修改这个问题。另外，您的javascript代码中没有名为revealLetter（）
的函数。我想问的是，是否可以将数组中的单个元素分配给表的每个单元格，因此，假设用户单击一个单元格时，它将显示数组中的一个字母。您不应该在不同的元素上使用相同的id
属性。如果您需要这样做，请使用类
好的，实际上我非常喜欢尝试一些逻辑。这是一个基本可行的游戏，并移动计数器