0

I am new to jquery and JavaScript and have little understanding of how they work. How come the script at the bottom does not run. If I insert it at the bottom of the jquery-1.10.0.js it works, but not if I put it in the HTML file. I understand that this is an old version of jquery but I have to use it.

<html>
    <head>
        <title>jQuery Sandbox</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/sandbox.css">
        <script type="text/javascript" src="js/jquery-1.10.0.js">   
            $(document).ready(function () {
            $("td.odd").css("background-color","green");
            var squares=$("td");
            for (var i=0; i<squares.length; i++) {
                squares[i].innerHTML = "X";
            } 
            $("#heading").css("background-color","green").css("color","red");
            $("#instructions").fadeOut();
            $("#instructions").fadeIn();
            $("#instructions").slideUp();
            $("#instructions").slideDown();
            $("#instructions").animate({left:"150px", width:"250px", height:"150px"})
            $("td.odd").addClass("temp").removeClass("odd");    
            $("td.even").addClass("odd").removeClass("even");
            $("td.temp").addClass("even").removeClass("temp");
            $("#googlelink").attr("href","https://www.google.ca");
            //three new things
            //1
            $("#checkerboard").focusin(function(){
                $("body").css("background-color", "red");
            });
            //2
            $("#checkerboard").focusout(function(){
                $("body").css("background-color", "white");
            });
            //3
            $("#googlelink").removeAttr("href");
            $("#googlelink").attr("href","https://www.facebook.ca");
            });
        </script>
    </head>
    <body>
        <h1 id="heading">The jQuery Sandbox</h1>
        <div id="instructions">
            <p><b>The jQuery 1.10.0 library is loaded up and ready to go. Open your browser's JavaScript console and start experimenting.</b></p>
            <p><b>Here are some ideas:</b></p>
            <ul>
                <li>Choose one of the colors on the checkerboard and change it with the <b>.css()</b> function (hint: it's made of "td" tags with classes named "even" and "odd")</li>
                <li>Fill in every checkerboard square with an X using the <b>.html()</b> function.</li>
                <li>Make this box (id="instructions") <b>.fadeIn()</b>, <b>.fadeOut()</b>, <b>.slideUp()</b> and <b>.slideDown()</b>.</li>
                <li>This box has the "position:absolute" property. Make it slide around with the <b>.animate()</b> function.</li>
                <li>Now make it slide around and change size at the same time. Create a command in this way that makes it "fold down"?</li>
                <li>Change the foreground and background color of the id="heading" element at the same time using chaining.</li>
                <li>Exchange the "odd" and "even" squares using <b>.addClass()</b> and <b>.removeClass()</b>. This can be done using 3 separate commands.</li>
                <li>Change <a id="googlelink" href="http://www.google.com" target="googlewindow">this link</a> (id="googlelink") so that it goes somewhere else using the <b>.attr()</b> function.</li>
            </ul>
        </div>
        <br>
        <div id="checkerboard">
            <table>
                <tr id="row1">
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                </tr>
                <tr id="row2">
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                </tr>
                <tr id="row3">
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                </tr>
                <tr id="row4">
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                </tr>
                <tr id="row5">
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                </tr>
                <tr id="row6">
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                </tr>
                <tr id="row7">
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                    <td class="odd"></td><td class="even"></td>
                </tr>
                <tr id="row8">
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                    <td class="even"></td><td class="odd"></td>
                </tr>
            </table>
            <form id="testForm" name="testForm">
                <input class="input" type="text" name="textField" value="Type Something Here">
            </form>

        </div>
        <script>
            $(document).ready(function () {
            $("td.odd").css("background-color","green");
            var squares=$("td");
            for (var i=0; i<squares.length; i++) {
                squares[i].innerHTML = "X";
            } 
            $("#heading").css("background-color","green").css("color","red");
            $("#instructions").fadeOut();
            $("#instructions").fadeIn();
            $("#instructions").slideUp();
            $("#instructions").slideDown();
            $("#instructions").animate({left:"150px", width:"250px", height:"150px"})
            $("td.odd").addClass("temp").removeClass("odd");    
            $("td.even").addClass("odd").removeClass("even");
            $("td.temp").addClass("even").removeClass("temp");
            $("#googlelink").attr("href","https://www.google.ca");
            //three new things
            //1
            $("#checkerboard").focusin(function(){
                $("body").css("background-color", "red");
            });
            //2
            $("#checkerboard").focusout(function(){
                $("body").css("background-color", "white");
            });
            //3
            $("#googlelink").removeAttr("href");
            $("#googlelink").attr("href","https://www.facebook.ca");
            });
        </script>
    </body>

</html>

Notice I have it in two spots. Neither seem to work.

  • check this out: https://stackoverflow.com/questions/6770234/where-do-i-put-the-document-ready (please note: currently, your script is within a `
    `)
     – Katie.Sun Nov 30 '18 at 23:49
  • If you are using document.ready you should just be able to put it with your other scripts (after jquery is loaded) – Pari Baker Nov 30 '18 at 23:54
  • yes this works, the problem is my professor wants it on the html page. That way he can quickly see the new code we added. Kinda dumb but what can i do? Also @Katie.Sun i followed everything in that article and it didn't help –  Nov 30 '18 at 23:55
  • Once you moved it outside of the div it is fine. Can you look in your console and make sure you are loading your jquery file? – Katie.Sun Nov 30 '18 at 23:57
  • The console stays empty when i refresh the page rn –  Nov 30 '18 at 23:59
  • 1
    You don't need the script in the header. Just put it before the closing body tag. Try replacing your current jQuery link with this: ` – Katie.Sun Dec 01 '18 at 00:03
  • No need to pull the code outside a div .. your js code should run anywhere .. your problem is not with the version of jquery .. I think your problem is how to include the script and jquery .. including jquery and your js code not in one ` – Mohamed-Yousef Dec 01 '18 at 00:07
  • i took out all my script and then just put some above the end body tag and it works. thanks a lot. –  Dec 01 '18 at 00:08
  • you need line to include jquery `` after this line you can try `` and test it for sure it will work if the path of jquery is right – Mohamed-Yousef Dec 01 '18 at 00:09
  • @Mohamed-Yousef he has it at the end of the html body, and I didn't suggest trying the different jQuery because of the version but because I thought he might not have been linking to his jQuery properly. The code in the head isn't even running as he posted it. – Katie.Sun Dec 01 '18 at 00:10
  • yes @Katie.Sun I got it .. but no need to move it from head to body .. anyway you solved his problem .. have a nice day :) – Mohamed-Yousef Dec 01 '18 at 00:12
  • 1
    Basic rule is if a ` – charlietfl Dec 01 '18 at 00:15

1 Answers1

0

Moved code into Snippet Tool and it works properly.

$(document).ready(function() {
  $("td.odd").css("background-color", "green");
  var squares = $("td");
  for (var i = 0; i < squares.length; i++) {
    squares[i].innerHTML = "X";
  }
  $("#heading").css("background-color", "green").css("color", "red");
  $("#instructions").fadeOut();
  $("#instructions").fadeIn();
  $("#instructions").slideUp();
  $("#instructions").slideDown();
  $("#instructions").animate({
    left: "150px",
    width: "250px",
    height: "150px"
  })
  $("td.odd").addClass("temp").removeClass("odd");
  $("td.even").addClass("odd").removeClass("even");
  $("td.temp").addClass("even").removeClass("temp");
  $("#googlelink").attr("href", "https://www.google.ca");
  //three new things
  //1
  $("#checkerboard").focusin(function() {
    $("body").css("background-color", "red");
  });
  //2
  $("#checkerboard").focusout(function() {
    $("body").css("background-color", "white");
  });
  //3
  $("#googlelink").removeAttr("href");
  $("#googlelink").attr("href", "https://www.facebook.ca");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<h1 id="heading">The jQuery Sandbox</h1>
<div id="instructions">
  <p><b>The jQuery 1.10.0 library is loaded up and ready to go. Open your browser's JavaScript console and start experimenting.</b></p>
  <p><b>Here are some ideas:</b></p>
  <ul>
    <li>Choose one of the colors on the checkerboard and change it with the <b>.css()</b> function (hint: it's made of "td" tags with classes named "even" and "odd")</li>
    <li>Fill in every checkerboard square with an X using the <b>.html()</b> function.</li>
    <li>Make this box (id="instructions") <b>.fadeIn()</b>, <b>.fadeOut()</b>, <b>.slideUp()</b> and <b>.slideDown()</b>.</li>
    <li>This box has the "position:absolute" property. Make it slide around with the <b>.animate()</b> function.</li>
    <li>Now make it slide around and change size at the same time. Create a command in this way that makes it "fold down"?</li>
    <li>Change the foreground and background color of the id="heading" element at the same time using chaining.</li>
    <li>Exchange the "odd" and "even" squares using <b>.addClass()</b> and <b>.removeClass()</b>. This can be done using 3 separate commands.</li>
    <li>Change <a id="googlelink" href="http://www.google.com" target="googlewindow">this link</a> (id="googlelink") so that it goes somewhere else using the <b>.attr()</b> function.</li>
  </ul>
</div>
<br>
<div id="checkerboard">
  <table>
    <tr id="row1">
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
    </tr>
    <tr id="row2">
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
    </tr>
    <tr id="row3">
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
    </tr>
    <tr id="row4">
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
    </tr>
    <tr id="row5">
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
    </tr>
    <tr id="row6">
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
    </tr>
    <tr id="row7">
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
    </tr>
    <tr id="row8">
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
      <td class="even"></td>
      <td class="odd"></td>
    </tr>
  </table>
  <form id="testForm" name="testForm">
    <input class="input" type="text" name="textField" value="Type Something Here">
  </form>

</div>

If you're calling the script in your head, it should be something like:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      // My Code Here
    });
    </script>
  </head>
  <body>
  Some Stuff
  </body>
</html>

You can also do this:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  </head>
  <body>
  Some Stuff
  <script>
  // My Code Here
  </script>
  </body>
</html>

In this second example, you do not need to call .ready() as the jQuery code will load after the other elements. That's all that .ready() does, is wait till the document has fully loaded before executing the jQuery.

Hope that helps.

Twisty
  • 30,304
  • 2
  • 26
  • 45