CODEWITHSUNDEEP
javascripthtmljquery
user12453494
user12453494

Reputation:

How do you call a javascript function with a HTML button click?

So, I'm trying to make a dice roller that can, you guessed it!, roll dice. I want to call a javascript function within a HTML button click. I know this is very easy with angular, but I am not using Angular. I am using jQuery, but I don't want to make the whole thing jQuery, however, if I have to, I will. Anyway, I am trying to make a button that adds a die, one that removes a die, one that adds a side to the dice, and one that removes a side from the dice. Oh, and one that rolls the dice, but I've already coded that in.
Here's my HTML (note: I am using jQuery so it might look a little weird):

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      $("#button0").click(function(){
        diceRoll = 0
        for (i=diceAmt;i>0;i--) {
          diceRoll += rand(1, diceSides)
        }
        document.getElementById("dieRoll").innerHTML = diceRoll;
      })
    </script>
  </head>
  <body>
    <div class="screen">
      <div class="top">
        <div class="text">
          <span id="dieRoll"></span>
        </div>
        &nbsp;
        <button class="button1" id="button0"></button>
      </div>
      <div class="bottom">
        <button class="button2">Add die</button>
        &nbsp;
        <button class="button3">Remove die</button>
        <br/>
        <button class="button2">Add side</button>
        &nbsp;
        <button class="button3">Remove side</button>
      </div>
    </div>
  </body>
</html>

Here's my JavaScript (again might look a little weird):

var diceAmt = 2
var diceSides = 6
var diceRoll
var xDx = diceAmt+"d"+diceSides
function floor(num){let n1=Math.round(num);let n2=n1-1;if(n1>num){return n2}else{return n1}}
function rand(num1,num2){let n1=num2+1-num1;let n2=floor(Math.random()*n1)+num2;return n2}
function addDie () {
  diceAmt += 1
  xDx = diceAmt+"d"+diceSides
  document.getElementById("button0").innerHTML = "Roll "+xDx
}
function rmoveDie () {
  diceAmt -= 1
  xDx = diceAmt+"d"+diceSides
  document.getElementById("button0").innerHTML = "Roll "+xDx
}
function addSide () {
  diceSides += 1
  xDx = diceAmt+"d"+diceSides
  document.getElementById("button0").innerHTML = "Roll "+xDx
}
function rmoveSide () {
  diceSides -= 1
  xDx = diceAmt+"d"+diceSides
  document.getElementById("button0").innerHTML = "Roll "+xDx
}

Now, I would normally show you my CSS here, but the CSS doesn't matter.
Oh, I almost forgot to show you the libraries I'm using. Here they are:
jquery.js

I would really like it if you could help me out here.

Thank you!

(Note: I would normally do that part in code but I figured it would be cooler if it was an actual h1.)

Upvotes: 3

Views: 9296

Answers (2)

Subesh Bhandari
Subesh Bhandari

Reputation: 1122

Whenever a button is triggered a click event is fired. To handle that event there are 3 ways in vanilla javascript:

1. Specifying the function to be called in an HTML tag.

<button class="button2" onclick="addDie()">Add die</button>

2. Adding a handler in the button onclick property in JS.

const button = document.getElementById("your_button_id");
button.onclick = function(event) {
// do something
}
// or in your case
button.onclick = addDie

3. Adding an event listener

With this approach, you can add any number of handler for your event in the button.

button.addEventListener("click", addDie);
button.addEventListener("click", dieRoll);

These three are the possible ways to handle the events using vanilla JS.

Since you are using jquery you can simply do,

$("#button2").click(addDie)

To make sure the events are attached safely you would need to wait till the document is loaded.

1. In Jquery

$( document ).ready(function() {
...
$("#button2").click(addDie)
...
}

2. In Vanilla JS

document.addEventListener("DOMContentLoaded", function(){
...
 button.addEventListener("click", addDie);
 button.addEventListener("click", dieRoll);
...
});

Knowing the above three ways will help you understand the ways events can be handled with vanilla js.

Upvotes: 8

CherryDT
CherryDT

Reputation: 29072

Based on the code you showed, I think the issue is that your script is in the head part, before the body (including the buttons) is even loaded.

That means that when you do $("#button0"), you get a collection of zero elements (the buttons don't exist yet), and then you attach a click handler to zero elements, so you are doing nothing.

The solution is simple: jQuery allows you in a very simple way to defer the execution of some code until the DOM has finished loading. That is done by calling $ as a function and passing a callback, i.e. $(...) (or, more verbosely, by writing $(document).ready(...)):

  $(function () {
      $("#button0").click(function(){
        diceRoll = 0
        for (i=diceAmt;i>0;i--) {
          diceRoll += rand(1, diceSides)
        }
        document.getElementById("dieRoll").innerHTML = diceRoll;
      })
  })

That should fix the issue.

Upvotes: 2

Related Questions