How can I use an onclick HTML attribute to call a function in JavaScript?

Question

I don't know why but my JavaScript isn't working in my HTML. I want to make a little "clickAdd" but it won't work. I tried everything but I didn't get it to work.

var points = 0;

function clickAdd() {
    points += 1;
    document.getElementById("clickDisplay").innerHTML = points;
    window.alert("Hallo");
};

<!doctype html>
<html lang="en">
  <head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Clicker 0.1</title>
  </head>
  <body>
     <h1 id="clickDisplay"></h1>
     <button  type="button" onclick="clickAdd">Click me!</button>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="text/javascript" src="mainscript.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

onclick="clickAdd()" <---

Jonas Wilms
– Jonas Wilms

2018-06-20 16:17:31 +00:00
Commented Jun 20, 2018 at 16:17 — Jonas Wilms
– Jonas Wilms, Commented Jun 20, 2018 at 16:17
thanks works i forgot

SchdowNVIDIA
– SchdowNVIDIA

2018-06-20 16:20:15 +00:00
Commented Jun 20, 2018 at 16:20 — SchdowNVIDIA
– SchdowNVIDIA, Commented Jun 20, 2018 at 16:20

Mike Donkers · Accepted Answer · 2018-06-20 16:17:44Z

3

You need to call the function in the onClick attribute by adding () at the end

var points = 0;

function clickAdd() {
    points += 1;
    document.getElementById("clickDisplay").innerHTML = points;
    window.alert("Hallo");
};

<!doctype html>
<html lang="en">
  <head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Clicker 0.1</title>
  </head>
  <body>
     <h1 id="clickDisplay"></h1>
     <button  type="button" onclick="clickAdd()">Click me!</button> <!-- <==== Added () here -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="text/javascript" src="mainscript.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

answered Jun 20, 2018 at 16:17

Mike Donkers

3,6992 gold badges23 silver badges34 bronze badges

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

2 Comments

SchdowNVIDIA Over a year ago

Omg i forgot this i made so long no javascript and html sorry :D thanks xD

Mike Donkers Over a year ago

@SchdowNVIDIA Happy to help! we all oversee things like this every now and then. ^^ If your question has been resolved, please don't forget to mark the answer that worked for you by clicking the checkmark beside the answer. This helps other people with similar questions find their answer in a fast manner.

Collectives™ on Stack Overflow

How can I use an onclick HTML attribute to call a function in JavaScript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related