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
– RidgeA, Commented Apr 19, 2019 at 19:35
You've declared your function inside the "ready" handler. That makes it unavailable to anything outside that scope. — Pointy
– Pointy, Commented Apr 19, 2019 at 19:35

Allam · Accepted Answer · 2019-04-19 19:38:36Z

2

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());
  }

answered Apr 19, 2019 at 19:38

Allam

1447 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard Bercap · Accepted Answer · 2019-04-19 19:47:25Z

1

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>

answered Apr 19, 2019 at 19:47

Richard Bercap

111 bronze badge

Comments

Zeeshan Ahmad Khalil · Accepted Answer · 2019-04-19 20:39:36Z

0

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>

edited Apr 19, 2019 at 20:39

Zeeshan Ahmad Khalil

8632 gold badges16 silver badges33 bronze badges

answered Apr 19, 2019 at 19:45

Henry Bersey

512 bronze badges

Comments

Ehsan K. harchegani · Accepted Answer · 2019-04-20 06:36:24Z

0

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>

edited Apr 20, 2019 at 6:36

Ehsan K. harchegani

3,1381 gold badge19 silver badges19 bronze badges

answered Apr 20, 2019 at 5:51

Victor Okonkwo

13 bronze badges

Collectives™ on Stack Overflow

HTML won't run JavaScript function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related