javascript runtime error save/restore

Question

I have created this code its make to store a table in a variable when i press save and return back to that state when i press restore but i seem to come across a runtime error on the last code (the Id of the table is sudoku) it works in firefox but not IE, Thanks

var clone
function save()
{
    var table = document.getElementById("sudoku")
    clone = table.innerHTML
}

function restore()
{
    document.getElementById("sudoku").innerHTML=clone
}

Edit: Error Message:

Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; CPNTDF; .NET4.0E; .NET4.0C; BOIE9;ENUS) Timestamp: Mon, 15 Oct 2012 16:57:44 UTC Message: Unknown runtime error Line: 50 Char: 128 Code: 0 URI: file:///F:/uni%20work/home/Second%20year/CO525/assessments/Assessment2/assessmen‌​t2/javascript.js Message: Unknown runtime error Line: 50 Char: 128 Code: 0 URI: file:///F:/uni%20work/home/Second%20year/CO525/assessments/Assessment2/assessmen‌​t2/javascript.js

edit full code:

    var current_cell = null; // the currently selected cell
    var saved = {};     // Object for saving the current game
    function initialize() {
var col, row;
// Work through all the cells in the table and set
// onclick event handlers and classNames for the empty
// ones.
for (row = 0; row <=8; row++) {
    for (col=0; col <= 8; col++) {
        var cell = document.getElementById('cell_' + col + '_' + row);
        if (!parseInt(cell.innerHTML)) {
            // cell is empty
            cell.onclick = selectCell;
            cell.className = 'tofill';
        }
    }
}
document.onkeypress = keyPress;
save();
    }
    var current_cell = null; // the currently selected cell
    var saved = {};     // Object for saving the current game
    function initialize() {
var col, row;
// Work through all the cells in the table and set
// onclick event handlers and classNames for the empty
// ones.
for (row = 0; row <=8; row++) {
    for (col=0; col <= 8; col++) {
        var cell = document.getElementById('cell_' + col + '_' + row);
        if (!parseInt(cell.innerHTML)) {
            // cell is empty
            cell.onclick = selectCell;
            cell.className = 'tofill';
        }
    }
}
document.onkeypress = keyPress;
save();
    }

    // mouse button event handler
    function selectCell() {
if (current_cell !== null) {
    current_cell.className = 'tofill';
}
current_cell = this;
current_cell.className = 'selected';
    }

    // Capture keyboard key presses. If the key pressed is a digit
    // then add it to the current cell. If it is a space then empty
    // the current cell.
    function keyPress(evt) {
if (current_cell == null)
    return;
var key;
if (evt)
    // firefox or chrome
    key = String.fromCharCode(evt.charCode);
else
    // IE
    key = String.fromCharCode(event.keyCode);
if (key == ' ')
    current_cell.innerHTML = '';
else if (key >= '1' && key <= '9')
    current_cell.innerHTML = key;
    }

    var clone
    function save()
    {
    var table = document.getElementById("sudoku");
    clone = table.innerHTML;
    }

   function restore()
    {
    document.getElementById("sudoku").innerHTML=clone;
   }

Answer 1

I assume #sudoku is a <table> element, isn't it? Internet Explorer does not allow setting the innerHTML property on table elements.

Instead, use proper DOM methods or just don't try to store HTML strings, but the contents of your sudoku in a two-dimensional array.

Answer 2

This is a long standing problem with IE and inserting new HTML using the innerHTML attribute.
(Gee, who'd have guessed, a problem with IE!!)

If you're willing to go to jQuery, then you can do it using...

$("#mytable").html(myHtml);

Otherwise it should work if you can somehow place the html into the innerHTML attribute of a <div> tag.

Another option is to create the individual objects yourself using the document.createElement("TR"); style of coding.

Answer 3

You can use DOM inbuilt javascript method cloneNode to clone your node..

E.G.

 var clone;
    function save()
    {
        var table = document.getElementById("sudoku");
        clone = table.cloneNode(true);
    }

    function restore()
    {
        document.getElementById("sudoku").parentNode.appendChild(clone);
    }

FOR Reference: https://developer.mozilla.org/en-US/docs/DOM/Node.cloneNode

Answer 4

The code added by you look like fine but I think you are missing semicolon after each statements.

    var clone;
    function save()
    {
        var table = document.getElementById("sudoku");
        clone = table.innerHTML;
    }

    function restore()
    {
        document.getElementById("sudoku").innerHTML=clone;
    }

Also you can go through jQuery html method. Click here jQuery html() funciton, if you want to read more about html() function.

e.g

    `$('#sudoku').html(clone);`