我需要获取许多ID之一的ID。它们每个都有id“row col ”，其中'*'等于数字。他们的元素都是div。
这里出现的问题是我通过id获取元素。我通过输入函数找到函数测试了它，但我需要让它找到特定于帽子的div。我知道这样做非常低效，但是现在我无法改变它，除非那是唯一的选择。
var tID = "col" + c.toString() + "row" + (r+1).toString();
var location = document.getElementById(tID);
编辑：tID是board元素中div的id。 我得到的错误是当我调用它时，location是一个null =。
html和代码：
<!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>
<!--<script src="fourinarow.js"></script>-->
<link rel="stylesheet" href="styles.css">
</head>
<body onload="gameStart()">
<div class="container-fluid">
<div id="header" >
<h1 id = "Main">Four-in-a-Row</h1>
</div>
<hr>
<div id = "animate">
<div id = "drop">
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 1" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 1)"></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 2" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 2)"></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 3" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 3)"></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 4" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 4)"></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 5" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 5)"></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 6" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 6)"></div>
<div class = "square col-xs-1" data-toggle="tooltip" title = "Column 7" ondragover = "dragOver(event)" ondragleave = "dragLeave(event)" ondrop = "onDrop(event, 7)"></div>
</div>
</div>
<hr>
<div id="board" >
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" id="col1row1"></div>
<div class = "square col-xs-1" id="co12row1"></div>
<div class = "square col-xs-1" id="col3row1"></div>
<div class = "square col-xs-1" id="col4row1"></div>
<div class = "square col-xs-1" id="col5row1"></div>
<div class = "square col-xs-1" id="col6row1"></div>
<div class = "square col-xs-1" id="col7row1"></div>
</div>
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" id="col1row2"></div>
<div class = "square col-xs-1" id="col2row2"></div>
<div class = "square col-xs-1" id="col3row2"></div>
<div class = "square col-xs-1" id="col4row2"></div>
<div class = "square col-xs-1" id="col5row2"></div>
<div class = "square col-xs-1" id="col6row2"></div>
<div class = "square col-xs-1" id="col7row2"></div>
</div>
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" id="col1row3"></div>
<div class = "square col-xs-1" id="col2row3"></div>
<div class = "square col-xs-1" id="col3row3"></div>
<div class = "square col-xs-1" id="col4row3"></div>
<div class = "square col-xs-1" id="col5row3"></div>
<div class = "square col-xs-1" id="col6row3"></div>
<div class = "square col-xs-1" id="col7row3"></div>
</div>
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" id="col1row4"></div>
<div class = "square col-xs-1" id="col2row4"></div>
<div class = "square col-xs-1" id="col3row4"></div>
<div class = "square col-xs-1" id="col4row4"></div>
<div class = "square col-xs-1" id="col5row4"></div>
<div class = "square col-xs-1" id="col6row4"></div>
<div class = "square col-xs-1" id="col7row4"></div>
</div>
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" id="col1row5"></div>
<div class = "square col-xs-1" id="col2row5"></div>
<div class = "square col-xs-1" id="col3row5"></div>
<div class = "square col-xs-1" id="col4row5"></div>
<div class = "square col-xs-1" id="col5row5"></div>
<div class = "square col-xs-1" id="col6row5"></div>
<div class = "square col-xs-1" id="col7row5"></div>
</div>
<div class="row">
<div class = "col-xs-1" ></div>
<div class = "col-xs-1" ></div>
<div class = "square col-xs-1" id="col7row6"></div>
<div class = "square col-xs-1" id="col7row6"></div>
<div class = "square col-xs-1" id="col7row6"></div>
<div class = "square col-xs-1" id="col7row6"></div>
<div class = "square col-xs-1" id="col7row6"></div>
<div class = "square col-xs-1" id="col7row6"></div>
<div class = "square col-xs-1" id="col7row6"></div>
</div>
</div>
</div>
<div id= "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" draggable= "true" ondragstart ="dragStart(event)" >
<img src= "player_2.png" alt= "Player 2 piece" height = 15% width = 15% id = "player2" data-toggle="tooltip" title = "Player two's piece" class = "player2 piece" draggable= "true" ondragstart ="dragStart(event)" >
-->
</div>
<div id = alert class ="alert">
</div>
<input type="button" onclick="gameStart()" 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>
<script>
var map = new Array(6);
var turnCount = 1;
function clearBoard(){
for(var r =0 ; r < 6; r++){
map[r]= new Array(7);
for(var c = 0; c < 7; c++){
map[r][c] = 0;
}
}
}
function boardSetup(){
clearBoard();
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;-->
}
<!--document.getElementById("board").innerHTML=board;-->
var temp = document.getElementsByClassName("blank");
for(var z = 0; z < temp.length; z++){
temp[z].className += " piece";
}
}
function disPiece(){
var piece1 = "<img src= player_1.png alt= Player1piece height = 15% width = 15% id = player1 data-toggle=tooltip title = 'Player one's piece' class = 'player1 piece' draggable= true ondragstart =dragStart(event) >";
var piece2 = "<img src= player_2.png alt= Player2piece height = 15% width = 15% id = player2 data-toggle=tooltip title = 'Player two's piece' class = 'player2 piece' draggable= true ondragstart =dragStart(event)>";
if(turnCount%2 == 1){
document.getElementById("piece").innerHTML = piece1;
}else if(turnCount %2 == 0){
document.getElementById("piece").innerHTML = piece2;
}
}
function gameStart(){
boardSetup();
disPiece();
playercount = 1;
}
function checkWin(){
var count;
for(var r = 0; r< 3; r++){
for(var c = 0; c < 4; c++){
if(map[r][c] > 0){
count = 1;
for(var i = 1; i < 4; i++){
if(map[r][c + i] == map[r][c]){
count++;
}
if(count == 4){
return map[r][c];
}
count = 1;
if(map[r + i][c] == map[r][c]){
count++;
}
if(count == 4){
return map[r][c];
}
count = 1;
if(map[r + i ][c + i] == map[r][c]){
count++;
}
if(count == 4){
return map[r][c];
}
count = 1;
if(map[r + i ][c - i] == map[r][c]){
count++;
}
if(count == 4){
return map[r][c];
}
count = 1;
}
}
}
}
return 0;
}
function getLowestRow(c){
var r = -1;
for(var i = 6; i >=0; i--){
if(map[c][i] == 0){
r = i;
console.log("lowest row =" + i);
break;
}
}
return r;
}
function dropPiece(event,c){
var alert = document.getElementById("alert");
var r = getLowestRow(c);
event.target.style.borderColor = "black";
event.target.style.backgroundColor = "white";
alert.innerHTML = "";
var tID = "col" + c.toString() + "row" + (r+1).toString();
var location = document.getElementById(tID);
if(r >= 0){
<!-- Tests -->
var test = "ece";
var temp = document.getElementById("pi" + test);
var temp2 = document.getElementById("piece");
console.log("ID: " + temp2.id);
console.log("ID: " + temp.id);
console.log("ID: " + location.id);
<!-- End tests-->
var piece = document.createElement('img');
assignImage(piece);
document.getElementById("animate").appendChild(piece);
var startPos = getOffset(event.target);
var endPos = getOffset(location);
piece.style.top = startPos.top + 1;
piece.style.left = startPos.left + 1;
var pieceYPos = piece.style.top;
var id = setInterval(frame, 5);
function frame(){
if(pieceYPos == endPos.top+1){
clearInterval(id);
} else{
pieceYPos++;
piece.style.top = pieceYPos + "px";
}
}
var par = document.getElementById("animate");
par.removeChild(piece);
var placePiece= document.createElement('img');
assignImage(placePiece);
location.appendChild(placePiece);
var player = turnCount%2 == 0 ? 2: 1;
map[c-1][r] = player;
}else{
alert.className = " alert-danger";
alert.innerHTML = "<bold>ERORR</bold> Cannot drop into that column, it is full";
}
}
function assignImage(content){
if(turnCount%2 == 0){
content.src = "player_2.png";
content.alt = "Player 1 piece";
}else{
content.src = "player_1.png";
content.alt = "Player 2 piece";
}
content.id="dropped";
content.widthe="15%";
content.height="15%";
}
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
//dragging
function dragStart(event) {
event.dataTransfer.setData("text", event.target.id);
}
function dragLeave(event){
event.target.style.borderColor = "black";
event.target.style.backgroundColor = "white";
}
function dragOver(event){
event.preventDefault();
console.log("Test");
if(turnCount%2 == 1){
event.target.style.borderColor = "blue";
event.target.style.backgroundColor = "#59F2F7";
}else if(turnCount%2 == 0){
event.target.style.borderColor = "red";
event.target.style.backgroundColor = "#F75D59";
}
}
function onDrop(event, c){
var win = checkWin();
if(win == 0){
dropPiece(event,c);
turnCount++;
disPiece();
}else{
var player = turnCount%2 == 1? 1:2;
alert("Player " + player + " wins!");
gameStart();
}
}
</script>
</footer>