Program not working on Google Chrome

Question

I am programming a sudoku puzzle (http://www.jsfiddle.net/sZ7Aq/4/). It works okay on IE, but when I try it on Google Chrome, the button doesn't do anything when I click on it. Is there a way to fix it so it works on all browsers?

Please note: I haven't finished it so there isn't a puzzle generating function. You must enter all numbers yourself.

Here is my main() function (if you did not click on the link yet):

function main() {
    getcellVal();
    if (validate() == false) {
        alert("Something's not right!");
        return false;
    }
    alert("Good job!");
    return true;
}

My button:

<button onclick="javascript: main()">Check my answer</button>

use ``, and read that http://en.wikipedia.org/wiki/Unobtrusive_JavaScript — Jonathan de M., Nov 21 '13 at 03:24
I believe there is an issue with jsfiddle that you cannot use the onclick="main();" unless you perform a work around. — Sam, Nov 21 '13 at 03:30
Check out this answer: http://stackoverflow.com/questions/9114747/onclick-event-not-firing-on-jsfiddle-net — Sam, Nov 21 '13 at 03:30
@Jonathan sorry typo `javascript: main()` not `javascript: main`. I changed it now. — Oliver Ni, Nov 21 '13 at 03:34
I found that there is an error in your other functions that is failing. Particularly "x0y0" is not defined. — Sam, Nov 21 '13 at 03:40
looking through your fiddle, you are trying to access the input elements by their name directly. That is not possible. — Sam, Nov 21 '13 at 03:41
I just put a form and set its name to `sudokuPuzzle`, and I referred to it like this: `sudokuPuzzle.x0y0.value`! — Oliver Ni, Nov 24 '13 at 03:51
I now finished my sudoku and here it is: http://oliverni.com/sudoku/sudoku.html — Oliver Ni, Jul 28 '14 at 00:41

score 0 · Answer 1 · answered Nov 21 '13 at 03:51

Use .addEventListener('click', main); For instance:

var check = document.getElementById('check');
check.addEventListener('click', main);

and of course add id="main" and remove the onclick from your button.

Updated fiddle

Then open your console and fix the other bugs...

score 0 · Answer 2 · answered Nov 21 '13 at 03:51

From your jsfiddle, the error is in your getcellValue() function. This code is incorrect:

colVal  =  [[x0y0.value, x0y1.value, x0y2.value, x0y3.value, x0y4.value, x0y5.value, x0y6.value, x0y7.value, x0y8.value],

I would suggest you change your input elements to have an id attribute that matches the name. Like this:

<input type="text" name="x0y0" id="x0y0">

Then change your getcellVal() function to use the getElementById function.

colVal  =  [[document.getElementById("x0y0").value, ...],

It will be much more verbose, but it will work in more browsers.

score 0 · Answer 3 · answered Nov 21 '13 at 03:56

Few things need to be corrected:

Instead of defining an event such as javascript: main() inline, use unobtrusive solution to register the necessary event handlers programmatically.

Eg:

<button id="buttonid">Check my answer</button>

window.onload = function() {
document.getElementById('buttonid').onclick = main;
};

You cannot access the DOM elements just by specifying their names. In your case x0y0.value will not return anything. Instead use id or class name to access the set of elements.

Eg:

<input type="text" name="x0y0" id="x0y0">

In javascript,

document.getElementById("x0y0").value

using .onclick is not much better... using .addEventListener('click', function) is much more accepted, as you can add more than one... — philwills, Nov 21 '13 at 04:04

Program not working on Google Chrome

3 Answers3