CODEWITHSUNDEEP
javascriptjqueryhtml
floreapaun
floreapaun

Reputation: 124

Why button function is not defined?

Any opinions on this? When the user presses the button the initially hidden div must show itself on the page. 

<!DOCTYPE html>
    <html>
    <head>

    <style>
        div {
        display: none;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        function show() {
                $("div").toggle();
        }
    </script>

    </head>


    <body>
    <p>Animals are cute!</p>
    <div><p>Some text gonna blow up some pixels!</p></div>
    <button onclick="show()">Click</button>

    </body>

    </html>

The exactly written error in the Console:

ReferenceError: show is not defined[Learn More

Upvotes: 0

Views: 204

Answers (2)

Denis Lazarev
Denis Lazarev

Reputation: 1

function show() {
    $(".any-text").toggle();
}
.any-text {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <body>
          <p>Animals are cute!</p>
          <div class="any-text"><p>Some text gonna blow up some pixels!</p></div>
          <button onclick="show()">Click</button>
    </body>
</html>

Upvotes: 0

Shilly
Shilly

Reputation: 8589

Move the inline script into its own tag. You can't use an external script and inline script in the same tag.

So:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function show() {
    $("div").toggle();
}
</script>

Upvotes: 3

Related Questions