Question

在函数clueClicked中，我试图从数组中提取值并更改表的innerHTML，这在某种程度上是行不通的。控制台上没有错误。请帮忙。我使用<td>的id来更改元素的内容。

<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
	width:330px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border: 1px solid black;
}
#cross{
	text-align: center;
	width:30px;
	height:30px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border: 1px solid white;
}


#buttons{
	width:30%;
	float: right;

}
tr{
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
#leftBox{
	float: left;	
}
#rightBox{
	float: left;
}
.butt{
	height:50px;
	width: 100px;
}
#puzzel{
	text-align: center;
}
.tableBox{
		width: 30px;
		height:30px;
		border: 1px solid black;
		text-align: center;
}
</style>

<script>

var currentTextInput;
var puzzelArrayData;

function initializeScreen(){

	var puzzelTable = document.getElementById("puzzel");
	puzzelArrayData = preparePuzzelArray();

	for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
		var row = puzzelTable.insertRow(-1);
		var rowData = puzzelArrayData[i];
		for(var j = 0 ; j < rowData.length ; j++){
			var cell = row.insertCell(-1);
			if(rowData[j] != 0){
				var txtID = String('txt' + '_' + i + '_' + j);
				cell.innerHTML = '<input type="text" class="tableBox" maxlength="1" style="text-transform: lowercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
			}else{
				cell.innerHTML = "1";
				cell.style.backgroundColor  = "black";
			}
		}
	}

}

function textInputFocus(txtID123){
	currentTextInput = txtID123;
}

function preparePuzzelArray(){
var items = [	[0, 0, 0, 0, 'p', 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 'u', 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 'n', 0, 'b', 0, 0, 0, 0],
				[0, 'h', 'y', 'd', 'e', 'r', 'a', 'b', 'a', 'd', 0],
				[0, 0, 0, 0, 0, 0, 'n', 0, 0, 'e', 0],
				[0, 0, 0, 0, 0, 0, 'g', 0, 0, 'l', 0],
				[0, 0, 'm', 'u', 'm', 'b', 'a', 'i', 0, 'h', 0],
				[0, 0, 0, 0, 0, 0, 'l', 0, 0, 'i', 0],
				[0, 0, 0, 0, 0, 0, 'o', 0, 0, 0, 0],
				['k', 'a', 's', 'h', 'm', 'i','r', 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 'e', 0, 0, 0, 0]
			];
return items;
}
function solveClicked(){
var testString = 'txt_12_15';
var tokens = testString.split('_');
alert(tokens);
}

function clearAllClicked(){
	currentTextInput = '';
	var puzzelTable = document.getElementById("puzzel");
	puzzelTable.innerHTML = '';
    initializeScreen();
}
function checkClicked(){

	for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
		var rowData = puzzelArrayData[i];
		for(var j = 0 ; j < rowData.length ; j++){
			if(rowData[j] != 0){
				var providedValue = document.getElementById('txt' + '_' + i + '_' + j).value;
				if(providedValue != puzzelArrayData[i][j]){
					console.log('Wrong entry found: ' + providedValue + " at " + i + j);
				}
			}
		}
	}
}

function clueClicked(){
	var temp1 = currentTextInput;
	var token = temp1.split("_");
	var row = token[1];
	var column = token[2];
	document.getElementById(temp1).innerHTML = puzzelArrayData[row][column];//here is the problem.
		
		
	
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">

</table>
</div>
<div id="rightBox">
<table>
	<tr><td><input class="butt"  type="submit" value="Clear All" onclick="clearAllClicked()"></td></tr>
	<tr><td><input class="butt"  type="submit" value="Check" onclick="checkClicked()"></td></tr>
	<tr><td><input class="butt"  type="submit" value="Solve" onclick="solveClicked()"></td></tr>
	<tr><td><input class="butt"  type="submit" value="Clue" onclick="clueClicked()"></td></tr>
</table>

</body>
</html>

Answer 1

这可能是因为您尝试在输入元素上使用innerHTML。您应该尝试使用value属性。 innerHTML通常用于包含某些内容的元素，即div，span等......

Answer 2

您好试试检查currentTextInput的值。因为它是一个全局变量，可能是因为你试图将它存储在另一个变量中而引发的错误。如果你有currentTextInput的期望值，只要尝试将它直接放在＆＃34;（）＆＃34;而不是将其保存到另一个变量上。

试试这个

function clueClicked(){
    //var temp1 = currentTextInput;
    var token = temp1.split("_");
    var row = token[1];
    var column = token[2];
    document.getElementById(currentTextInput).innerHTML = puzzelArrayData[row][column];//here is the problem.
    }

Answer 3

非常正确。您必须使用value属性而不是innerHTML。这是因为innerHTML更像是静态文本，并不是为接受用户输入而设计的。

function clueClicked(){
    var temp1 = currentTextInput;
    var token = temp1.split("_");
    var row = token[1];
    var column = token[2];
    document.getElementById(temp1).value = puzzelArrayData[row][column];//here is the problem.we use value not innerHTML
}

document.getElementById（）。innerHTML无效，控制台没有错误

3 个答案: