使用Reaper WebRC开发Web遥控器时的JavaScript数组访问问题

你的核心问题是每次循环都直接替换了容器的innerHTML，导致之前的标记内容被覆盖，最终只保留最后一个标记的信息。以下是修复后的代码和说明：

修复后的代码 #

<!doctype html>
<html>
<head>
<script src="main.js"></script>
<script type="text/javascript">
function wwr_onreply(results) {
  var ar = results.split("\n");
  // 先清空标记容器，避免递归请求时重复渲染旧内容
  const markerContainer = document.getElementById("marker");
  markerContainer.innerHTML = "";

  for (var i = 0; i < ar.length; i++) {
    var tok = ar[i].split("\t");
    // 只处理MARKER类型的条目
    if (tok[0] === "MARKER") {
      // 为每个标记创建独立的显示元素
      const markerItem = document.createElement("div");
      // 格式化标记信息，按需调整显示内容
      markerItem.textContent = `标记: ${tok[1]} | ID: ${tok[2]} | 位置: ${tok[3]} | 颜色值: ${tok[4]}`;
      markerContainer.appendChild(markerItem);
    }
  }
}

wwr_req_recur("MARKER", 1000);
wwr_start();
</script>
</head>
<body>
<p>所有标记信息:</p>
<div id="marker"></div>
</body>
</html>

关键修复点 #

1. 清空容器：每次收到Reaper的回复时，先清空marker容器，避免递归请求（每1秒刷新一次）时重复叠加旧标记。
2. 追加而非替换：不再用innerHTML = tok直接覆盖内容，而是为每个标记创建新的DOM元素并添加到容器中，确保所有标记都能被保留显示。
3. 精准判断条目类型：优化条件判断，直接匹配tok[0] === "MARKER"，避免无效循环。

补充说明 #

你看到tok.length始终为5是正常的——每个MARKER行拆分后正好对应5个字段（标记类型、名称、ID、位置、颜色），而Reaper返回的每个标记是单独一行，所以ar数组的每个元素对应一个标记，遍历ar就能拿到所有标记数据。之前alert能逐个看到标记，是因为alert在循环中逐个触发，但innerHTML每次替换，所以页面最终只显示最后一次循环的结果。

内容的提问来源于stack exchange，提问作者calp