Why is this JavaScript button click failing to call a function?

Question

I am beginner of javascript. but it doesn't work. plz help me.

I am using Microsoft VSCode.

This is my main.html.

<!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"/>
  <link rel="javascript" src="script.js"/>
  <link rel="stylesheet" href="https://unpkg.com/papercss@1.4.1/dist/paper.min.css"/>
  <link rel="stylesheet" href="style.css"/>

  <title>Ultimate R-S-P</title>
</head>
<body>
    <div class="login_box">
    <h1><span class="badge" id="loginbtn">main</span>
    </div>
</body>
</html>

This is script.js

console.log("start!");

var loginBtn = document.getElementById("loginbtn");

loginBtn.onclick = function(){

    console.log("onclick event start");

};

To include javascript use – Mahesh Hegde Feb 08 '18 at 07:41 — Mahesh Hegde, Feb 08 '18 at 07:41
Thanks ! that's a good point ! – Crystal Kim Feb 08 '18 at 07:50 — Crystal Kim, Feb 08 '18 at 07:50

score 2 · Answer 1 · answered Feb 08 '18 at 07:44

2

You need change the:

<link rel="javascript" src="script.js"/>

into:

<script src="script.js"></script>

answered Feb 08 '18 at 07:44

Fadhly Permata

1,597
11
24

score 1 · Answer 2 · answered Feb 08 '18 at 07:44

first choice:put script at the bottom of the body

<!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="script.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/papercss@1.4.1/dist/paper.min.css" />
  <link rel="stylesheet" href="style.css" />

  <title>Ultimate R-S-P</title>
</head>

<body>
  <div class="login_box">
    <h1><span class="badge" id="loginbtn">main</span></h1>
  </div>
  <script>
    console.log("start!");

    var loginBtn = document.getElementById("loginbtn");

    loginBtn.onclick = function() {

      console.log("onclick event start");

    };
  </script>
</body>

</html>

second choice:move your script content to the window.onload=function(){}

window.onload = function() {

    console.log("start!");

    var loginBtn = document.getElementById("loginbtn");

    loginBtn.onclick = function() {

        console.log("onclick event start");

    };
};

if you choose this,you have to change your script tag

<link rel="javascript" src="script.js"/>

to

<script src="script.js"></script>

thanks! now i see. if i want to put script between the head, i needed use the [ window.onload = function() {} // .js code] — Crystal Kim, Feb 08 '18 at 07:53
@CrystalKim,yes,you can take control of the elements only after the document have been loaded,also,another way is put script content in document.addEventListener("DOMContentLoaded", function(event) {},false). window.onload is easier to use. — xianshenglu, Feb 08 '18 at 07:55

score 0 · Answer 3 · answered Feb 08 '18 at 08:24

The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).

So, you need to change this code:

 <link rel="javascript" src="script.js"/>

into this:

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

Abana Clara · Answer 4 · 2018-02-08T08:28:50.140

-1

Use this tag not the link tag

<script src="script.js"></script>

Also fix your html you are missing an h1 end tag

<h1><span class="badge" id="loginbtn">main</span></h1>

edited Feb 08 '18 at 08:28

answered Feb 08 '18 at 07:44

Abana Clara

3,633
2
15
29

syam · Answer 5 · 2018-02-14T09:18:23.753

-1

Add Script tag as below. You have used link tag instead of script.

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

edited Feb 14 '18 at 09:18

answered Feb 08 '18 at 07:45

syam

784
1
12
28

score -2 · Answer 6 · answered Feb 08 '18 at 07:51

actually i was confused.

that was location of javascript.

solution

<body>
    <div class="login_box">
    <h1><span class="badge" id="loginbtn">main</span>
    </div>

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


</body>

i put the javascript code in the body.

Why is this JavaScript button click failing to call a function?

6 Answers6