-1

I am trying to write a bit of code using JQuery's .hover method but have found that it works when written in the main html file index.html but does not when written in a javascript file referenced as <script language="JavaScript" type="text/javascript" src="main.js"></script>. Currently I am trying to get my head around the hover method by applying it to the button tag. It successfully executes the script written in the html file but does not execute the script in main.js

I am not receiving any errors in console and main.js is being referenced correctly as there is other code in that file that is running successfully

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sudoku Solver</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script language="JavaScript" type="text/javascript" src="main.js"></script>
        <script language="JavaScript" type="text/javascript" src="sudokuSolver.js"></script>
    </head>
    <body>

        <button class='solveSudoku' style="margin-right: 30px">Solve!</button><button class='clearSudoku'>Clear</button>

        <div id='container'></div>


        <script>
            $("button").hover(
                function () {
                    alert("Test")
                }, function () {}
            );            
        </script>

    </body>
</html>

main.js

function createGrid() {
    for (var rows = 0; rows < 9; rows++) {
        for (var columns = 0; columns < 9; columns++) {
            cell = "<div class='grid' "
            if (rows%3==2) {
                cell += "style='box-shadow: 0 1px 0 #000, "
            } else {
                cell += "style='box-shadow: 0 1px 0 rgb(150, 150, 150), "
            }
            if (rows%3==0) {
                cell += "0 -1px 0 #000, "
            } else {
                cell += "0 -1px 0 rgb(150, 150, 150), "
            }
            if (columns%3==2) {
                cell += "1px 0 0 #000, "
            } else {
                cell += "1px 0 0 rgb(150, 150, 150), "
            }
            if (columns%3==0) {
                cell += "-1px 0 0 #000;'></div>"
            } else {
                cell += "-1px 0 0 rgb(150, 150, 150);'></div>"
            }
            $("#container").append(cell);
        }
    }
    $(".grid").width(90);
    $(".grid").height(90);
}

$("button").hover(
    function () {},
    function () {
        alert("Test2")
    }
);


$( document ).ready(function() {
    createGrid()
});
Retsek
  • 217
  • 1
  • 7
  • Maybe you are not referencing the correct location of main.js. If you view source, then click on main.js, does it show your code in the browser? – Lonnie Best Jun 06 '20 at 14:22
  • 1
    Yep leads to the right place. The code in main.js works, it makes a grid. Which means it goes straight past the the part with the hover method and the executes createGrid() when the document is ready – Retsek Jun 06 '20 at 14:31
  • It has nothing to do with moving the script from inside the ` – Quentin Jun 06 '20 at 14:36
  • I'm not familiar with JQuery, but maybe you are referencing the button incorrectly. In the HTML, I see that the button has a class, but doesn't have an id. I'd try giving the ` – Lonnie Best Jun 07 '20 at 00:50
  • Again, I don't know JQuery, but maybe your are missing the `get(0)` method or `[0]` as shown [here](https://stackoverflow.com/a/1677910/217867). `$("button")` is probably returning an array and you are treating it like it is returning a specific element. – Lonnie Best Jun 07 '20 at 00:55
  • Oh, I see. You need to query for elements [after page load](https://stackoverflow.com/a/8716680/217867). – Lonnie Best Jun 07 '20 at 01:16

1 Answers1

-1

It works if I put the function inside the $(document).ready() like this

$( document ).ready(function() {
    createGrid()

    $("button").hover(
        function () {},
        function () {
            alert("Test2")
        }
    );
});

But I don't know why? Once main.js gets to $(document).ready() does it just keep looping inside there meaning that after the first run through the script it never goes back to the hover bit?

Retsek
  • 217
  • 1
  • 7