继续获取无法阅读的属性＆＃39;长度＆＃39;未定义的错误＆＃34;＆＃34;有： （仍然是一项正在进行的工作）这只是为了将一个图像作为一种占位符添加到div中。
var board=document.getElementsByClassName("square");
var blank = "<img src = blank.png alt= blank class = blank></img>";
for(var x in board){
document.board[x].innerHTML(blank)
}
这仍然是一项正在进行中的工作，但我要求董事会进行测试
<!DOCTYPE HTML>
<html>
<head>
<title>Play four-in-a-Row</title>
<meta charset=ütf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<div class="container-fluid">
<body onload="boardSetup()">
<div id="header" >
<h1 id = "Main">Four-in-a-Row</h1>
</div>
<hr>
<table border="1" id = "drop">
<tr>
<td data-toggle="tooltip" title = "Column 1"></td>
<td data-toggle="tooltip" title = "Column 2"></td>
<td data-toggle="tooltip" title = "Column 3"></td>
<td data-toggle="tooltip" title = "Column 4"></td>
<td data-toggle="tooltip" title = "Column 5"></td>
<td data-toggle="tooltip" title = "Column 6"></td>
<td data-toggle="tooltip" title = "Column 7"></td>
</tr>
</table>
<hr>
<div id="board" >
<div class="row">
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure " ></div>
</div>
<div class="row">
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure " ></div>
</div>
<div class="row">
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure " ></div>
</div>
<div class="row">
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure " ></div>
</div>
<div class="row">
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure " ></div>
</div>
<div class="row">
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure col-xs-1" ></div>
<div class = "sqaure " ></div>
</div>
</div>
<div class= "piece">
<img src= "player_1.png" alt= "Player 1 piece" height = 15% width = 15% id = "player1" data-toggle="tooltip" title = "Player one's piece"class ="player1 piece"></img>
<img src= "player_2.png" alt= "Player 2 piece" height = 15% width = 15% data-toggle="tooltip" title = "Player two's piece" class = "player2 piece"></img>
</div>
<script>
var map;
function boardSetup(){
var board=document.getElementsByClassName("square");
var blank = "<img src = blank.png alt= blank class = blank></img>";
for(var x in board){
document.board[x].innerHTML(blank)
}
document.getElementById("board").innerHTML=board;
var temp2 = document.getElementsByClassName("blank");
for(var z in temp2){
temp2[z].className += " piece";
}
}
function gameStart(){}
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
function draggover(ev){
}
function drag(ev){
}
</script>
<input type="button" onclick="boardSetup()" value="Reset" class="btn btn-danger btn-block" ></input>
</div>
</body>
<footer>
<hr>
<a href="../index.html"><- Back to launch page</a>
<hr>
<p style= "text-align: right"> done by <br>Justin Michel <br> u14369852</p>
<hr>
</footer>
</html>
答案 0 :(得分：1)
您的问题是，您使用for/in循环遍历 node list （从.getElementsByClassName()调用返回的DOM元素集），这是一个 array-like object 。当您这样做时，您没有迭代集合中的元素，而是迭代节点列表对象本身的属性。
您应该使用计数循环来迭代节点列表或已转换为数组的节点列表上的.forEach循环。
您也不应该使用document限定要循环的DOM元素，因为变量board[x]是对元素的直接引用。
此外， innerHTML 是属性，而不是方法。您将其设置为您要使用的值，不要将其传递给它。
最后，HTML <img>元素不会被关闭（</img>）。它们是不允许具有“内容”的元素，例如：<br>，<meta>，<link>，<hr>和<base>。
这是一个简单的计数循环，它将迭代返回的元素：
var board=document.getElementsByClassName("square");
var blank = "<img src='blank.png' alt='blank' class ='blank'>";
for(var x = 0; x < board.length; ++x){
board[x].innerHTML = blank;
}
并且，JavaScript Arrays支持原生的 .forEach() 方法，允许迭代元素。节点列表不是实际的数组，因此它本身不实现该方法，但它是一个“类似”的对象，可以使用 Array.slice() method 转换为一个。这看起来像这样：
var board = document.getElementsByClassName("square");
var blank = "<img src='blank.png' alt='blank' class ='blank'>";
// Call the native slice array method (which returns an array)
// and then call forEach on that array:
Array.prototype.slice.call(board).forEach(function(element){
element.innerHTML = blank;
});