Calling a Function Upon Button Press

Using an HTML button to call a JavaScript function

There are a few ways to handle events with HTML/DOM. There's no real right or wrong way but different ways are useful in different situations.

1: There's defining it in the HTML:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: There's adding it to the DOM property for the event in Javascript:

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: And there's attaching a function to the event handler using Javascript:

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

Both the second and third methods allow for inline/anonymous functions and both must be declared after the element has been parsed from the document. The first method isn't valid XHTML because the onclick attribute isn't in the XHTML specification.

The 1st and 2nd methods are mutually exclusive, meaning using one (the 2nd) will override the other (the 1st). The 3rd method will allow you to attach as many functions as you like to the same event handler, even if the 1st or 2nd method has been used too.

Most likely, the problem lies somewhere in your CapacityChart() function. After visiting your link and running your script, the CapacityChart() function runs and the two popups are opened (one is closed as per the script). Where you have the following line:

CapacityWindow.document.write(s);

Try the following instead:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

EDIT
When I saw your code I thought you were writing it specifically for IE. As others have mentioned you will need to replace references to document.all with document.getElementById. However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion. Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.

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

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.

Calling a function from a HTML button

You can change onclick=push() to onclick="push()" to make it work!

Also, there might be something wrong in the body of the push function because of which it is not able to compile - hence, the error.

How do I call this function on a button press?

Since you'll be deleting entries from your model, you'll have to put the button in a form that submits the id of the student entry to a view function that then deletes that student of that id from your database.

Here's a video which explains how to do this:

Delete Items From The Database

how to call a function in when button click

you can refactor your component something like this

onGridRowClicked(e: any) {
  if (e.event.target !== undefined) {
    let actionType = e.event.target.getAttribute("data-action-type");
    if (actionType == "edit") {

      this.rowData = this.myservice.getExistRecord(e.data.empid).subscribe((data: any) => {
        debugger
        console.log("inside get data from list 1")

        if (data.message == "GetSuccess") {

          //get data from the list
          debugger
          this.txtusername = e.data.username;
          this.txtempaddress = e.data.empaddress;
          this.txtpassword = e.data.password;
          this.txtcountry = e.data.country;
          this.empId = e.data.empid;
          this.dataUpdate();
          console.log("empid", e.data.empid);
          console.log("Edit Icon Clicked");
        }
      });
    }
    else if (actionType == "delete") {
      console.log("View delete action clicked");
    }
  }
}

//after get the data then update a record
dataUpdate() {
  this.myservice.editExistRecord(this.empId, this.txtusername, this.txtempaddress, this.txtpassword, this.txtcountry).subscribe((data: any) => {
    console.log("Inside editExistRecord")
    if (data.message == "UpdateSuccessfully") {
      this.list();
    }
  });
}

edit() {
  this.dataUpdate();
}

How to call a function on button click in react js?

try this

class Comp {
  constructor() {
    this.sayHello = this.sayHello.bind(this);
    this.createButtonsArray = this.createButtonsArray.bind(this);
  }

  sayHello() {
    alert("Hello!");
  }
  createButtonsArray(arr) {
    return arr.arr.map((key, index) => (
      <input type="button" onClick={this.sayHello} />
    ));
  }
}

OR

If you want to bind this

class Comp {
  sayHello = () => {
    alert("Hello!");
  }

  createButtonsArray = (arr) => {
    return arr.arr.map((key, index) => (
      <input type="button" onClick={this.sayHello} />
    ));
  }
}

---

Related Topics