Javascript 为什么这个简单的计数器不在我的循环中工作答案

【问题标题】：Javascript why isnt this simple counter working in my loopJavascript 为什么这个简单的计数器不在我的循环中工作
【发布时间】：2023-03-16 06:04:01
【问题描述】：

我有一个名为 button 的函数，它使用循环附加 m 表。我已经修改了循环，以便为它创建的每个 <td> 分配一个 ID。但是，它似乎无法正常工作。

它在起作用，按照下面的用例来测试它：http://jsfiddle.net/JEAkX/19/

这是我用来测试它的一个简单用例：

更改单元格中的字母
按“更多”
更改其中一个新单元格中的字母

如果正确分配了 ID，它的功能应该与原始单元格相同。

计数器是：var n = 13;

它被插入到附加的单元格中：

cell.innerHTML = "<input type='text' id='r"+ (n) +"' size='1' onChange='getPos('r"+ (n++) +"'), modifyCells('alphabetTable')' value='" + subset[i++] + "' />"`

这是我得到的 DOM 源代码：

<td><input id="r13" size="1" onchange="getPos(" r14="" ),="" modifycells(="" alphabettable="" )="" value="q" type="text"></td>
<td><input id="r14" size="1" onchange="getPos(" r15="" ),="" modifycells(="" alphabettable="" )="" value="r" type="text"></td>

我怀疑这与像 @zzzzBov 所说的将所有内容都塞进 1 行有关，但我不知道该怎么做。

【问题讨论】：

我之前已经说过很多次了：HTML 是你的模型，CSS 是你的视图，JavaScript 是你的控制器。让他们分开。 HTML属于.html，CSS属于.css，JS属于.js。如果您的输入需要 onchange 事件，请通过 javascript 添加它，而不是通过 HTML，然后扩展代码以使其可读和可调试。不要试图将 HTML 中的所有内容都塞在一行中。这种方式效果不好。
你打算 n++ 两次吗？
我不太清楚您要做什么。你期望发生什么？只是一个疯狂的猜测，但您确定要在一行中多次使用 ++ 运算符吗？
@zzzzBov 如果我知道更好的方法，我会这样做，但是我周一晚上开始使用 javascript，我正在尝试通过朋友给我的文档来学习。
@Brad 不，但是当我将其更改为 n 时，它的行为仍然不像我预期的那样。

标签： javascript loops counter

【解决方案1】：

除了 n++，您的 HTML 中还有一个引用问题。 onchange 属性中有嵌套的单引号，如下所示：

<input type='text' id='r19' size='1' onChange='getPos('r20'), modifyCells('alphabetTable')' value='p' />

语法的快速修复是使用转义的双引号，这样你就可以开始了： cell.innerHTML = "<input type='text' id='r"+ n +"' size='1' onChange='getPos(\"r"+ (n++) +"\"), modifyCells(\"alphabetTable\")' value='" + subset[i++] + "' />"

【讨论】：

我很困惑...我没有看到转义的双引号？
抱歉，从我的粘贴缓冲区中粘贴了错误的内容。给我一点时间。
另外，我将第二个 n++ 更改为 n 但它仍在向其添加 1...如果 id="r19" 那么 getPos 应该是 getPos('r19')
n++ 需要在循环中的最后一个，所以它应该是第一个被修改的 n++，而不是第二个。更好的办法是将 n++ 放在线路之外，因为在线路内部它只会迷失在一般线路噪音中。
谢谢！我把n++ 拿出来放在上面，所以这条线只有n 非常感谢！

【解决方案2】：

尽管有 HTML/CSS/JS 的分离......你需要 3 级引号。另外，onclick 事件中的逗号必须是分号。

也许：

cell.innerHTML = "<input type='text' id='r" + n + "' size='1'
  onChange='getPos(\"r" + (n++) + "\"); modifyCells(\"alphabetTable\")'
  value='" + subset[i++] + "' />"

【讨论】：

我迟到了一天，少了一美元;-)