HTML button isn't working with JavaScript function

I have defined a function in javascript and referenced it in my html in the form of a button but when I click the button, the function doesnt run and there is an error in the console saying the function I’m using is defined but it isnt used.

I double checked my code and checked for typos and everything looks fine to me, here is the code:

Javascript Code:

function displayDate() {
  document.getElementById("now").innerHTML = Date();
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>DateCheckerThing</title>
  </head>
  <body>
    <button type="button" onclick="displayDate()">What is today's date?</button>
    <h1 id="now"></h1>
  </body>
</html>

>Solution :

Welcome to Stack Overflow! First, let’s clarify something: Your function is being used, but just not in the way that your text editor or IDE expects. Your HTML code is calling the function whenever a button is pressed, and your code does work as intended. However, your text editor/IDE is noticing that the function isn’t being used by any other Javascript code; Thus, you’re getting a warning that no other Javascript is using the function. You’re text editor/IDE doesn’t know that the HTML file is actually using the function. This won’t actually result in any errors. Hopefully this helps.

Another issue that I notice is that you don’t have a script tag in your HTML code. To fix this, you can add <script defer src="js_file_name"> to your HTML (obviously, change the string to match the name of your JS file). This loads the JS file along with your HTML, so that functions will be loaded from the JS file. (Note: the defer keyword just means that the JS file will be loaded after the HTML page is loaded.)

Leave a Reply