为什么使用"array[row][col]= usedspace;"不能根据每个变量(行或列)增加特定列和行？

Question

我是迈克尔，我是这个论坛的新手。我想问的是，如何通过Java脚本使字符"O"跟随字符"X"，这是一个20*20的数组，但是"X"传递"."被替换为"O"。例如，以某种方式增加 if 语句中的计数器，该计数器依赖于"数组 a"的行和列的 for 循环？

function start()
{
	document.getElementById("wrapper").style="visibility:hidden";
	
	
	var  optionOne = document.getElementById("optionOne");
	var display = "";
	
	var txt1 = document.getElementById("txt1");
	var mtxt1 = parseInt(txt1.value);
	
	if (mtxt1 == 1)
		{
		display += "<p>Pen is currently NOT DRAWING</p>";
		 document.getElementById("wrapper").style="visibility:display";
		
		}
	else if (mtxt1 == 2)
		{
		display += "<p>Pen is  DRAWING</p>";
		document.getElementById("wrapper").style="visibility:display";
		}
	optionOne.innerHTML = display;
	
	
	 var button = document.getElementById("getbutton");
	 button.addEventListener("click",start,false );
	 
	 
	 //var displaygmb = document.getElementById("displaygmb");
	 //displaygmb.addEventListener("click", displaygameboard("Gameboard",array,length,arraydisplay),false );
	 
	 var button2 = document.getElementById("get2button");
	 button2.addEventListener("click",option2(button2,mtxt1),false );
	 
}
function option2(buttonn,symbolinput)
{
	
	 var input = symbolinput; 
	 var usedspace = "O";
	 var turtle = "X";
	 var gameboardSymbol = ".";
	 
		var clickcountt = buttonn;
		var count6 = 1;
		var count5 = 1;
		var count3 = 1;
		var count4 = 1;
		var display = "";
		clickcountt.onclick = function() {
			 
	
	var optiontwo = document.getElementById("optiontwo");
	var display2 = "";
	
	var txt2 = document.getElementById("txt2");
	var mtxt2 = parseInt(txt2.value);
	
	
	 if (mtxt2 == 6)
		{
		 count6 += 1;
		 display2 += "<p>Turtle is moving "+count6+" places down</p>";
		}
	 else if (mtxt2 == 5)
		{
		 count6 -=1;
		 count5 +=1;
		 display2 += "<p>Turtle is moving "+count6+" places up</p>";
		}
	 else if (mtxt2 == 3)
		{
		 count3 += 1;
		 display2 += "<p>Turtle is moving "+count3+" places to the right</p>";
		}
	 else if (mtxt2 == 4)
		{
		 count3 -=1
		 count4 += 1;
		 display2 += "<p>Turtle is moving "+count3+" places to the left</p>";
		}
	 
	 optiontwo.innerHTML = display2;
	 
	 
		 var gameboardsize = 20;
		 var  arraydisplay = document.getElementById("arraydisplay");
		 
		 
		 var array = new Array (gameboardsize);
	     var length = array.length;
	     for (var i = 0; i <= length; i++ )
		 {
		  array[i] = new Array(gameboardsize);
		 }
	     
	 	var  arraydisplay = document.getElementById("arraydisplay");
	     
	     var displaygbd = "<table id=gameb align=center><thead><th>"+"Gameboard"+"</th></thead><tbody>";
		 
			
	 	 for (var row = 1; row <= length;  row++)
		{
	 		//three += 1;
	 		displaygbd += "<tr>";
		for (var col = 1; col <= length;  col++)
		{
			
			
			if (input == 1){
			//four += 1;
			if (((row ==count6)&&(col ==count3))) 
				{
				array[row][col]= turtle;
				}
			else {
				array[row][col]=gameboardSymbol;
			}
			}
			//----------------------------
			else if(input == 2)
			{
			
				
			if (((row == count6)&&(col ==count3)))
			{
			array[row][col]= turtle;
			
			}
      /*how to make 'O' follow 'X' by ibncrease the appropriate counter in the if below?*/
			else if (((row <= count6)&&(col <=count3)))
				{
				array[row][col]= usedspace;
				}
				
				
			else  if ((((row >= count6)||(col >= count3))))
			{
			array[row][col]=gameboardSymbol;
			}
			
			}//end else if 
					
			//----------------------------
			
			displaygbd += "<th>"+array[row][col]+"xa0"+"</th>";
		}
		displaygbd += "</tr>";
		}
	 	displaygbd += "</tbody></table>";
	     
		 
	 	arraydisplay.innerHTML = displaygbd;
	     
	     
		}//end clickout function     
		
}

window.addEventListener("load",start,false);

@charset "ISO-8859-1";
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 30%;
}
#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    
}
#customers thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #4CAF50;
    color: white;
}
#customers tbody th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: white;
    color: black;
text-align:center;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Initializing an array</title>
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src ="tutle.js"></script>
</head>
<body>
select your first option
<input id ="txt1" type="text">
<input id = "getbutton" type ="button"  value = "your option">
<div id = "optionOne"></div>
<br/>
<div id = "arraydisplay"></div>
<div id="wrapper" >
select your second option
<input id ="txt2" type="text">
<input id = "get2button" type ="button"   value = "your option">
<div id = "optiontwo"></div>
</div>
<div id = "counters"></div>
<div id = "optionthree"></div>
</body>
</html>

Answer 1

分享一个可能的解决方案。这应该让你比开始更多。

尝试自己在这里运行它，让我知道这是否可以。如果需要，我会添加解释。

2 个输入接收新位置"X"。 text1接收行号，text2接收列号。按下按钮时，相应的尺寸将更新。

var button1 = document.getElementById('getbutton');
var button2 = document.getElementById('get2button');
var textbox1 = document.getElementById('txt1');
var textbox2 = document.getElementById('txt2');
var gridX = 20;//table size length wise
var gridY = 20;//table size width wise
var arrayContainer = document.getElementById('arraydisplay');
var currentX = 1;//initial positions
var currentY = 1;
function init() {
	var myTable = document.createElement('table');
	myTable.setAttribute("id", "customers");
	arrayContainer.appendChild(myTable);
	//Creating initial grid
	for(var i=0; i<gridX; i++) {
		var row = document.createElement('tr');
		for(var j=0; j<gridY; j++) {
			var text = document.createTextNode('.');
			var column = document.createElement('td');
			column.appendChild(text);
			row.appendChild(column);
		}
		myTable.appendChild(row);
	}
	//Setting initial value
	document.getElementsByTagName('tr')[currentX-1].getElementsByTagName('td')[currentY-1].innerText = 'X';
}
init();
button1.onclick = clicked;
function clicked() {//1st position changed
	var newX = parseInt(textbox1.value);
  var newY = parseInt(textbox2.value);
	moveTo(newX, newY);
}
button2.onclick = clicked;
function moveTo(newX, newY) {
	//Setting old value to 'O'
  var char = 'O'
  if(newX == 1)
    char = '.';
	document.getElementsByTagName('tr')[currentX-1].getElementsByTagName('td')[currentY-1].innerText = char;
	//Setting new location with 'X'
	document.getElementsByTagName('tr')[newX-1].getElementsByTagName('td')[newY-1].innerText = 'X';
	//Updating current location of 'X' for future use.
	currentX = newX;
	currentY = newY;
}

@charset "ISO-8859-1";
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 30%;
}
#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    
}
#customers thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #4CAF50;
    color: white;
}
#customers tbody th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: white;
    color: black;
text-align:center;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Initializing an array</title>
<link rel="stylesheet" type="text/css" href="style.css"> 
<!-- <script src ="turtle.js"></script> -->
</head>
<body>
select your first option
<input id ="txt1" type="text">
<input id = "getbutton" type ="button"  value = "your option">
<div id = "optionOne"></div>
<div id="wrapper" >
select your second option
<input id ="txt2" type="text">
<input id = "get2button" type ="button"   value = "your option">
<div id = "optiontwo"></div>
</div>
<div id = "counters"></div>
<div id = "optionthree"></div>
<br>
<div id = "arraydisplay"></div>

</body>
<script src ="turtle.js"></script>
</html>