Question

试图在javascript中制作一个扫雷并遇到这个问题......

我创建了一个表，每个td都是一个“盒子”，里面有一个或者没有（当前）。单击一个框后，javascript应该将onclick从“clicked（this.id）”更改为一个警告“NOPE”（发出警告只是为了测试是否发生了什么事情），但发生的事情是：

我点击“方框1”，它会显示那里有什么（炸弹或什么都没有）
我再次点击它，这次我收到警告“NOPE” - 这意味着onclick已经改变。好！
我点击“方框2”，它显示那里有什么（炸弹或什么都没有）
我再次点击它，这次我收到警告“NOPE” - 这意味着这个onclick也发生了变化！
我再次点击“方框1”。点击的（this.id）再次运行。（这是因为我每次运行函数时都添加了一个计数器）

出于某种原因，onclick返回其原始值（clicked（this.id））..

我制作了一个测试页面，一个包含2个td的表格并记住了相同的想法（点击后更改了onclick值）并且它有效..我不知道如何解决这个问题...

运行的test.html： http://pastebin.com/62ayRJps

网站中的HTML无法正常工作： http://pastebin.com/SZ6NU8j9

来自网站的Javascript无法正常工作： http://pastebin.com/bevJHNLc

Answer 1

由于clicked(id)中的这一行：

，您的点击事件处理程序正在重置

document.getElementById("minesweeper").innerHTML += ammountClicked+" - "

每个表格单元格的HTML都有onclick='clicked(this.id);'属性。将测试函数tst分配给表单元格DOM对象时，您正在设置DOM对象的onclick属性，但这不会更改HTML的onclick属性。（是的，这令人困惑。）

在上面的代码行中，浏览器从扫雷innerHTML（具有原始div属性）读取onclick，将其与另一个字符串连接，然后重新分配结果回到扫雷div。这会清除div的原始内容，并将其替换为新的HTML（每个单元格都具有原始onclick属性的表格）。

如果您想要一个消息区域，建议您在另一个元素上设置innerHTML：Demo

在演示中，我更改了第49行（添加span）：

print += "</table><span id='message'></span>";

和第107行（将文本分配给span）：

document.getElementById("message").innerHTML += ammountClicked+" - ";

Answer 2

我建议你跟踪每个项目的状态。在运行应用程序时最好不要修改代码。

var states = {1: 0, 2: 0};

function clicked(id)
{
    if (states[id] === 0)
      alert("First time clicking me, eh?");
    else
      alert("Seems we have a repeat offender!");

    states[id]++;
}

这使您可以通过检查给定state的{{1}}是否已更改（例如，通过之前的点击）来拆分函数中的逻辑。

interactive demo on jsbin

Answer 3

在function clicked(id)中进行一些修改后，它可以正常工作：

评论专线//document.getElementById(id).onclick = tst;
在功能

field[row][column] = false;

在执行任何操作之前检查字段是否包含false：

if (field[row][column] == false) {
    console.log("This cell has already been clicked");
    return;
}

无需更改onclick事件。

Jeffery To 解释的问题如下：

点击单元格 0,0
函数clicked被称为
minesweeper.innerHTML = minesweeper.innerHTML + "1 - " [重置所有onclick事件]
单元格0,0的onclick事件已更改
点击新单元格 0,1 ，例如
minesweeper.innerHTML = minesweeper.innerHTML + "2 - " [重置所有onclick事件]
单元格 0,1 的onclick事件已更改

onclick事件被重置，因为innerHTML包含所有onclick声明。这就像重写该div的所有HTML，从而重写所有子元素及其事件。这也是你的简单例子（只有两个单元格的例子）有效的原因。

Onclick一直回到原来的价值

3 个答案: