How to Get the Onclick Calling Object

How to get the onclick calling object?

pass in this in the inline click handler

<a href="123.com" onclick="click123(this);">link</a>

or use event.target in the function (according to the W3C DOM Level 2 Event model)

function click123(event)
{
    var a = event.target;
}

But of course, IE is different, so the vanilla JavaScript way of handling this is

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

or less verbose

function doSomething(e) {

    e = e || window.event;
    var targ = e.target || e.srcElement || e;
    if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
}

where e is the event object that is passed to the function in browsers other than IE.

If you're using jQuery though, I would strongly encourage unobtrusive JavaScript and use jQuery to bind event handlers to elements.

how to get the event object for onClick()

Its easy, just add "event" key word to your onClick call, like so:

$(handler).html('<input type="text" value="'+text+'" style="width:280px;" 
    onClick=stopPropagation(event); />');

Then in your function:

function stopPropagation(event) { /* do work */ }

or you can do it the jQuery way:

$('input').on("click", function(event) { /* do work */ });

keep in mind, on your inline functions, just like the word this, event is a key word that tells the js your function should be getting an event argument

Finally you could just change the add all together:

var newInp = $("<input />").width(280).text(text);
$(handler).append(newInp);
newInp.on("click", function(e) { /* e is your event */ });

Javascript: calling object function/method from onclick event, with dynamic argument

Do not add event handlers and elements like that. Use DOM methods

var anchor = document.createElement("a");
anchor.innerHTML = "link";
anchor.onclick = function(){ MyItem.toggle(); };
document.body.appendChild(anchor);

I actually think you are after something like this

var MyItem;

MyItem = new myobj('testobj');

function myobj(id) {
    var that = this;
    this.toggle = function () {
        alert(id);
    }
    function draw() {
        var anchor = document.createElement("a");
        anchor.innerHTML = "link";
        anchor.onclick = function () {
            that.toggle();
        };
        document.body.appendChild(anchor);
    }
    draw();
}

Get object data and target element from onClick event in react js

What about using an arrow function in the onClick handler?

handleClick = (e, data) => {
    // access to e.target here
    console.log(data);
}

<input type="checkbox" value={data.id} defaultChecked={false} onClick={((e) => this.handleClick(e, data))}/>

onClick to get the ID of the clicked button

You need to send the ID as the function parameters. Do it like this:

<button id="1" onClick="reply_click(this.id)">B1</button><button id="2" onClick="reply_click(this.id)">B2</button><button id="3" onClick="reply_click(this.id)">B3</button>    <script type="text/javascript">  function reply_click(clicked_id)  {      alert(clicked_id);  }</script>

How do I call an Object Function from an onClick Event?

Just define your own obj variable with the current instance, using closure for the event listener:

… else {
    var obj = this;
    div.onclick = function(e) {
        obj.eventFoo(this.id);
    };
}

See also How to access the correct `this` context inside a callback? for a very similar manifestation of the problem (though you want to use the this of the handler).

Get element from which onclick function is called

Pass the this reference to the function, then read textContent property the text content of the node.

HTML

<button onclick="test(this)">Button 1</button>

Script

function test(clickedElement){
   var button_name = clickedElement.textContent;
}

Fiddle

Javascript: Pass an onclick event the id of the calling object

My guess is you could do the following in your GetLocation() function:

var GetLocation = function(someObject){
   var objectID = someObject.id;
   alert("the id is -> " + objectID);
};

Event object from onClick event couldn't access one of the props on the element in react

Issue

The only valid values for the type attribute for HTML button elements is "submit", "button", and "reset". This is why you are seeing the console log "submit" always.

Solution

I suggest converting the handleBreakLength and handleSessionLength click handlers to curried functions to close over a type key for the state updates.

handleBreakLength(type) {
  return (e) => {
    console.log(type);
    const { value } = e.currentTarget;
    this.handleOperation(type, value);
  };
}

handleSessionLength(type) {
  return (e) => {
    console.log(type);
    const { value } = e.currentTarget;
    this.handleOperation(type, value);
  };
}

Remove the type prop and close over the "types" you want passed to the handlers.

<TimerLengthControl
  title="Break Length"
  titleID="break-label"
  decrementID="break-decrement"
  incrementID="break-increment"
  spanID="break-length"
  span={this.state.brkLength}
  onClick={this.handleBreakLength("brkLength")} // <-- close over type
/>
<TimerLengthControl
  title="Session Length"
  titleID="session-label"
  decrementID="session-decrement"
  incrementID="session-increment"
  spanID="session-length"
  span={this.state.sesnLength("sesnLength")}
  onClick={this.handleSessionLength("sesnLength")} // <-- close over type
/>

In TimerLengthControl hardcode a type="button" attribute so you won't accidentally submit any enclosing form elements.

<button
  id={props.decrementID}
  value="-1"
  type="button"
  onClick={props.onClick}
>
  <i className="fas fa-arrow-down"></i>
</button>
<span id={props.spanID}>{props.span}</span>
<button
  id={props.incrementID}
  value="+1"
  type="button"
  onClick={props.onClick}
>
  <i className="fas fa-arrow-up"></i>
</button>

How to Get the Onclick Calling Object