0

I have a 9x9 sudoku grid, and each box has an input element assigned to it.

When I set the values in the box and try to inspect the input element I notice that the innerHTML property is empty ("").

This is where I am stuck, why is input element not picking the values that I enter?

Here's my JS:

window.onload = function(){
    var grid = [];
    setInputBox();
    document.getElementById('btn').onclick = function(){
        solve(grid);
    }

};


function setInputBox(){
    var inputElements = document.getElementsByTagName('td');
    for(var prop in inputElements){
        if(inputElements[prop].innerHTML = " "){
            inputElements[prop].innerHTML += '<input type="number" min="1" max="9"/>';
        }
    }
}

var solve = function(grid){
    grid = document.getElementsByTagName('input');
    console.log(grid);
//        for(var i = 0; i < 9; i++){
//            for(var j = 0; i < 9; j++){
//
//                if(checkValidity(grid,i,j)){
//                    console.log('valid');
//                }
//                else{
//                    console.log('invalid');
//                }
//            }
//        }
    }
theonlygusti
  • 11,032
  • 11
  • 64
  • 119
Raj
  • 107
  • 1
  • 3
  • 11

1 Answers1

0

Depending on what your "input" is, I'm assuming they are <input type="text">?

If so, then you'll need to use .value instead of .innerHTML

.innerHTML is used to get all the HTML within a tag.

IE

<form>
    <input type="number" class="whatever"> 
</form>

This doesn't really have any "inner html" within the input tag, because it's its own element. You'd want the VALUE of that element, not the contents of the tag.

However

<div id="whatever">
   <a href="#">link text</a>
</div>

You could get the .innerHTML of the <a> tag here, because there are contents between the opening and closing tags... meaning there is HTML on the inside (aka innerHTML)

leigero
  • 3,233
  • 12
  • 42
  • 63