JavaScript function not being called on button press-CodePudding

I have a relatively trivial problem, that has caused me to get stumped for a few hours

I am trying to get my button to call a JavaScript function that logs to console

Here is my HTML

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

    <script type="text/javascript" src="script.js"></script>

    <meta charset="UTF-8">
    <title>McKinsey Prep</title>

    <div>
        <button onclick="click()">Some Button</button>
    </div>
</head>
<body>

</body>
</html>

The button here is calling the click() method in this JavaScript file

 console.log("Code has reached here")
    function click(){
     console.log("Button was clicked REEEEe")
}

The script.js file only has this function, I DO NOT want to execute code in my HTML document

When I run my index.js it prints the first print statement but the console.log in the function call does not appear on console when I click my button

NOTE

I am left clicking my index.html and pressing run to run my code.

What could be the issue?

CodePudding user response：

Click() is a reserved name, you can't use it on a function because there is a native method on JS with that name.

Change the name of your function and try again. Here is an example

<button onclick="clicked()">Some Button</button>

 function clicked(){
 console.log("Button was clicked REEEEe")}

CodePudding user response：

The name of the function, click, is the issue. click is not a reserved word in JavaScript but the name does exist elsewhere in the scope where the onclick handler runs. You have 2 options:

Change the function name (doClick, for example).
Qualify the function name by referring to it as window.click in the onclick handler: onclick="window.click()"

There's a much more in-depth explanation here: javascript function name cannot set as click?

Unrelated to this, but something that could confuse someone during debugging: In your example code, your <div> is inside the <head> part of the HTML page. That content should actually be in the <body> section below, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="script.js"></script>
    <meta charset="UTF-8">
    <title>McKinsey Prep</title>
</head>
<body>
    <div>
        <button onclick="doClick()">Some Button</button>
    </div>
</body>
</html>

CodePudding user response：

Why are you placing your HTML code within the head section? It is best for you to move your HTML content to the body section. Also, a good practice is always to use the defer attribute of the script tag. This attribute allows you to load the script after all HTML are parsed. Here is an example:

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

    <script type="text/javascript" src="script.js"></script>

    <meta charset="UTF-8">
    <title>McKinsey Prep</title>

    </head>
    <body>
    <div>
        <button onclick="click()">Some Button</button>
    </div>
</body>
</html>

Also, I would like to point out the error made by the other answerer. The word 'click' is not a JavaScript reserved word. It can be used as a name for functions as you will see here:

function click() {
    alert("Hi");
}
click(); // alerts `Hi`