7

试图用javascript制作扫雷器并遇到了这个问题......

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

  1. 我点击“框 1”，它显示那里有什么（炸弹或什么都没有）
  2. 我再次单击它，这次我收到一个警报“NOPE”——这意味着 onclick 已更改。好的！
  3. 我点击“框 2”，它显示那里有什么（炸弹或什么都没有）
  4. 我再次点击它，这一次我得到一个警告“NOPE”——这意味着这个 onclick 也发生了变化！
  5. 我再次单击“框 1”。clicked(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

4

3 回答 3

4

由于以下行，您的单击事件处理程序正在被重置clicked(id)：

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

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

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

如果你想有一个消息区，我建议innerHTML在另一个元素上设置：Demo

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

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

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

document.getElementById("message").innerHTML += ammountClicked+" - ";
于 2013-02-04T16:20:38.583 回答
1

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

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给定的id是否已更改（例如，通过先前的单击）来拆分函数中的逻辑。

jsbin 上的交互式演示
于 2013-02-03T12:00:42.337 回答
0

通过一些修改function clicked(id)它可以工作：

  1. 注释行//document.getElementById(id).onclick = tst;
  2. field[row][column] = false;在函数末尾添加

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

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

无需更改 onclick 事件。

正如Jeffery To所解释的，问题如下：

  1. 你点击单元格0,0
  2. 函数clicked被调用
  3. minesweeper.innerHTML = minesweeper.innerHTML + "1 - "[重置所有 onclick 事件]
  4. 单元格 0,0 的 onclick 事件已更改
  5. 您单击一个新单元格，例如0,1
  6. minesweeper.innerHTML = minesweeper.innerHTML + "2 - "[重置所有 onclick 事件]
  7. 单元格0,1的onclick 事件已更改

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

于 2013-02-06T09:36:58.513 回答