CODEWITHSUNDEEP
javascriptjqueryhtml
Matthew Wilcox-148003656
Matthew Wilcox-148003656

Reputation: 19

The html doesn't seem to be able to read the script element

This code is trying to change a paragraph element in the html, but nothing in the script element seems to even be recognized

We have tried many different variations of this code to try to understand what isn't working, but nothing in the script element is even recognized

<!DOCTYPE html>
<html>
    <head>
        <h3>Final Schedule</h3>
    </head>

    <body>
        <p id ="fs">hi2</p>
        <input id="request" type="button" value="Get Final Schedule">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
            $(document).ready(function(){
                console.log("hi");
                $("#request").click(requestClicked);
                console.log("done2");
            });

            console.log("h")
            function requestClicked(){
                $("#fs").html("ohafhiohfos");
                console.log("done");
            };
        </script>
    </body>
</html>

I want the code to change the paragraph element to something else, but nothing is working, and the console.log()'s aren't working at all

Upvotes: 0

Views: 1189

Answers (5)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

  1. You are using a rather old version of jQuery and might want to update to a more recent one
  2. A script tag can either have an src attribute, requiring a script file, OR script content directly, not both. So just make a second script block with the code you'd like to execute:

        <p id ="fs">hi2</p>
        <input id="request" type="button" value="Get Final Schedule">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                console.log("hi");
                $("#request").click(requestClicked);
                console.log("done2");
            });

            console.log("h")
            function requestClicked(){
                $("#fs").html("ohafhiohfos");
                console.log("done");
            };
        </script>

Upvotes: 1

demo
demo

Reputation: 169

Try making one <script> tag for jQuery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>) and another one for your code:

<script>
            $(document).ready(function(){
                console.log("hi");
                $("#request").click(requestClicked);
                console.log("done2");
            });

            console.log("h")
            function requestClicked(){
                $("#fs").html("ohafhiohfos");
                console.log("done");
            };
        </script>

Upvotes: 1

jtylerm
jtylerm

Reputation: 472

you need 2 script tags, 1 to list the jquery library you're using and 1 to write the actual code

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

A script tag can't have both src and internal text code. You need two tags

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            console.log("hi");
            $("#request").click(requestClicked);
            console.log("done2");
        });

        console.log("h")
        function requestClicked(){
            $("#fs").html("ohafhiohfos");
            console.log("done");
        };
    </script>

Upvotes: 3

Isaac Vidrine
Isaac Vidrine

Reputation: 1666

You can't put your code inside the script element for jQuery. Instead add another script tag below it with your code.

<!DOCTYPE html>
<html>
    <head>
        <h3>Final Schedule</h3>
    </head>

    <body>
        <p id ="fs">hi2</p>
        <input id="request" type="button" value="Get Final Schedule">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
          $(document).ready(function(){
                console.log("hi");
                $("#request").click(requestClicked);
                console.log("done2");
            });

            console.log("h")
            function requestClicked(){
                $("#fs").html("ohafhiohfos");
                console.log("done");
            };
        </script>
    </body>
</html>

Upvotes: 4

Related Questions