HTML won't run JavaScript function

Question

The issue it that I can't get a simple JavaScript function to run with HTML. I get an error that says "Uncaught ReferenceError: getYear is not defined".Thanks!

$(document).ready(function () {
  function getYear(){
    document.write(new Date().getFullYear());
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>

<body>
    <footer>
        <p>&copy; <script> getYear()</script> | All rights reserved</p>
    </footer>
</body>
</html>

`getYear` function creates only after the document is ready. Move the function declaration outside the `ready` callback — RidgeA, Apr 19 '19 at 19:35
You've declared your function inside the "ready" handler. That makes it unavailable to anything outside that scope. — Pointy, Apr 19 '19 at 19:35
[Why is document.write considered a “bad practice”?](https://stackoverflow.com/q/802854/215552) — Heretic Monkey, Apr 19 '19 at 19:41

score 2 · Accepted Answer · answered Apr 19 '19 at 19:38

I believe that's because you wrapped the function in your js file in a document.ready state so you're unable to access the function inside your HTML footer tag because of that.

removing the document.ready will solve the issue.

your new code should be

  function getYear(){
    document.write(new Date().getFullYear());
  }

score 1 · Answer 2 · answered Apr 19 '19 at 19:47

You have to remove ready function, because this function waits that all page onload, only use:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
     
  function getYear(){
    document.write(new Date().getFullYear());
  }

    </script>
</head>

<body>
    <footer>
        <p>&copy; <script> getYear()</script> | All rights reserved</p>
    </footer>
</body>
</html>

score 0 · Answer 3 · edited Apr 19 '19 at 20:39

Try the following code;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>

<body>
    <footer>
        <p> &copy; <script>
                document.write(new Date().getFullYear());
            </script>| All rights reserved </p>
    </footer>
</body>

</html>

score 0 · Answer 4 · edited Apr 20 '19 at 06:36

You would not need the

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

Your new code should be like:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script>

function getYear(){ return  new Date().getFullYear();  }

</script>

</head>

<body>
    <footer>
        <p>&copy; <script> getYear()</script> | All rights reserved</p>
    </footer>
</body>
</html>

HTML won't run JavaScript function

4 Answers4