document.getElementById().innerHTML not working, no error on console
Question
In the function clueClicked, I am trying to pull the value from the array and change the innerHTML of the table, this is somehow not working. no errors on the console. Please help. I am using the id of the <td> , to change the content of the element.
<!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>
3 answers
solution1
0 ACCPTED 2015-09-28 00:33:37
This could be because you are trying to use innerHTML on an input element. You should try using the value attribute instead. innerHTML is typically for elements that contain something, ie div, span, etc...
solution2
0 2015-09-28 00:49:16
Hi try checking the value of currentTextInput. since its a global variable, maybe the error initiated from it because you tried to store it in another variable. If you have the expected value for currentTextInput, just try to put it directly in the "()" rather than saving it onto another variable.
Try this
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.
}
solution3
0 2015-09-28 00:52:08
is very correct. You have to use the value attribute not the innerHTML. This is because innerHTML is more like static text and is not designed to accept user input.
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.