Question

我试图制作一个小Javascript玩具，在某种程度上，每次点击它时，表格中的单元格会在3个图像之间循环。我试图通过在其他空<div>内设置<td>的InnerHTML来实现此目的，但是单元格的内容不会明显更新。

这是我在HTML中的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mirror Game</title>
<link rel="stylesheet" type="text/css" href="../css/mirrors.css" /> 
</head>
<body>
<table id="gameTable">
  <tr id="rowA">
    <td id="A1"></td>
    <!-- I'll spare you the whole, currently empty table -->
  </tr>
  <tr id="rowB">
    <td id="B1"></td>
    <td><div id="B2"><img src="../images/mirrors/blank.png" /></div></td>
    <td id="B3"></td>
  </tr>
</table>
<div id="links">
<a href="../index.html">Click here to return to the index!</a><br />
<script src="../js/mirrors.js"></script>
</body>
</html>

（CSS只是让细胞50 * 50带边框，所以我知道我在哪里点击）

在JS中：

var B2state = 0;
var B2image = "blank";
document.getElementById("B2").addEventListener("click", function() { 
    console.log(B2state); //debug
    ++B2state;
    console.log(B2state); //debug
    if (B2state > 2 || B2state < 0) { //keeps state looping around from 0-2
        B2state = 0;
    }
    console.log(B2state); //debug
    switch (B2state) {
        case 0: B2image = "blank"; break;
        case 1: B2image = "slash"; break;
        case 2: B2image = "backslash"; break;
        default: B2image = "blank"; alert("state out of bounds"); break; //should never happen, hence why i have it tell me if so
    }
    console.log(B2image); //debug
    document.getElementById("B2").InnerHTML = "<img src=\"../images/mirrors/" + B2image + ".png\" />";
    console.log(document.getElementById("B2").InnerHTML); //debug
}, false);

根据控制台日志，一切正常。国家正在递增/循环，＆＃34;图像＆＃34;字符串正在改变它应该是什么，最值得注意的是，InnerHTML以<img>打印到控制台，具有正确的src。但是，页面上没有任何内容发生变化。

搜索解决方案只会显示人们在使用InnerHTML尝试更改之前加载脚本的问题，我已经确保在此处避免使用。

Answer 1

document.getElementById("B2").innerHTML = "<img src=\"../images/mirrors/" + B2image + ".png\" />";

你有innerHTML with capital i（InnerHTML）。如果它仍然无效，请检查此link以了解如何添加html元素

InnerHTML =＆＃34; string＆＃34;不修改显示的页面

1 个答案: