We Keep Coding

get id of button by clicked with function

html
<button id="test1" onclick="getclickname(); return false;">click</button>
javascript (it's showing "Undefined")
function getclickname()
{
alert(this.id);
}
i dont want code like this
<button id="test1" onclick="alert(this.id);">click</button>
call getclickname is needed, thanks guys

You have to pass corresponding argument to the function.
You need to pass button object to onclick function to get the id of button.
function getclickname(obj)
{
//By passing object as argument you can access all properties of that element
alert(obj.id);
alert(obj.className);
}
<button id="test1" onclick="getclickname(this); return false;" class="test_1">click</button>
You can directly pass this.id as well as an argument
function getclickname(id) {
alert(id);
}
<button id="test1" onclick="getclickname(this.id); return false;">click</button>
Note:
A bit code modification is instead of return false; you can add return before function name and that will do the same thing. like :- onclick="return getclickname(this.id);"
By passing object as argument you can access all properties of that element (check first code sample modification).

Hope this Helpful...
view
onclick="return getclickname(this);"
js
function getclickname(these)
{
alert(these.id);
}

Please try the below code. It's working for you.
Use class for click event in button.
<button id="test1" class="test-btn" >click</button>
Use the below click event function to get id after click.
$('.test-btn').click(function() {
var id = $(this).attr('id');
alert(id)
});

Use like this
<button id="test1" onclick="getclickname(this); return false;">click</button>
<script>
function getclickname(e)
{
alert(e.id);
}
</script>

What's wrong with binding onclick event like this?

What is wrong with binding onclick event like this?? Somehow the function never gets triggered.
I think more elaborate codes will explain the question better, I was using es6 template to generate the above codes sippet:
let tmp = ` <div id="pageAppointment">
${this.renderDates(this.data.dateOptions)}
${this.renderTimes(this.timeOptions)}
${this.data.tip ? `<div class="tip flex align-center">${this.data.tip}</div>` : ``}
<div class="btn-wrap mui-flex">
<div class="ok-btn cell" onclick="${this.onOK}">OK</div>
</div>
</div>`
$(this.root).html(tmp);

Your handler just defines a function onOK, but you never call it so why should it be called? If you want it to be executed turn it into an IIFE like so
(function onOK() { ...})()

Because onclick="function name();" creates a function, it doesn't call it. You can do
onclick="alert(111);" instead.
<button onclick="alert(111);"> click </button>
Or call the function which is in a .js file like :
function onOK(){
alert(111);
}
<button onclick="onOK();">click</button>
It is really bad, but as an example, you can do :
<button onclick="function onOK(){
alert(111);
}; onOK();" >click</button>
which creates the function THEN call it. It is an example, don't do that but now you understand how it works

The correct way would be:
<div onclick="alert(111);">ok</div>

Use onclick function on your script file, then append on your elements.
<div onclick="someFunc()">ok</div>
Script file:
function someFunc(){
...
}

Call your function in the end function name();
<button onclick = "function clck(){alert('hi');}clck();">
Click
</button>

It should be like this
function myFunction(){
alert('Clicked');
}
<div onclick="myFunction()">Button Div</div>

I am getting Reference error:checkout not defined

I have a button named checkout.But onclick i'm getting this error : Reference error:checkout not defined
My button code is :
<input type="button" value="Checkout" title="Checkout" class="button checkout" onclick="checkout()">
When i click on the button i want to show user-info
javascript code is:
$(function(){
$('.add-cart').html('+');
function checkout(){
$('.cart-status').hide(slow);
$('.user-info').show(slow);
}
});

Checkout is defined inside another function so it is not accessible from the global scope. You can put it in the global scope:
$(function () {
$('.add-cart').html('+');
});
function checkout() {
$('.cart-status').hide('slow');
$('.user-info').show('slow');
}
But a better solution is to stop putting event handlers in your HTML markup:
<input type="button" value="Checkout" title="Checkout" class="button checkout" />
$(function(){
function checkout() {
$('.cart-status').hide('slow');
$('.user-info').show('slow');
}
$('.add-cart').html('+');
$('.button.checkout').click(checkout);
});
(Note: Another problem in your code was that you were using the undefined variable slow instead of the string value 'slow', but scoping was preventing checkout() from being called at all.)

Knockout VIewModel triggers function inside foreach

I am fighting with strange issue and i am running out of ideas.
The problem is that my view model is triggering function inside foreach on click. So in this case if i click on div menuConnections testcall function is being triggered. Even if i send other value to testcall (such as div id) same value is being sent when I click on menuConnections.
How to stop this and force testcall to be executed only when i click on TheDivWhoCalls?
function ProfileViewModel(userId) {
var self = this;
self.connectionRequests = ko.observableArray();
self.getConnections = function () {
$("#menuConnections").css({ "display": "block" });
//other code which returns data
};
self.testcall = function(data) {
alert(target);
};;
}
<div id="menuConnections" data-bind='click: getConnections'>Connections</div>
<div id="connections" style="display: none">
<div data-bind="foreach: connectionRequests">
<div id="TheDivWhoCalls" data-bind='click: $root.testcall("asd")'><img src="~/Resources/Images/yesIcon.png" /></div>
</div>
</div>

I can't tell for sure without seeing an actual running example with ko.applyBindings but try changing
data-bind='click: $root.testcall("asd")
to
data-bind='click: $parent.testcall.bind($parent, "asd")
Explanation:
First I changed $root to $parent. I don't know what your $root is, but its safe to assume that your $parent is the VM with the testcall method.
More importantly, is that click: expects a function, but $root.testcall("asd") invokes the function returning undefined. Instead we use Function.prototype.bind to create a new function from testcall with the parameter set to "asd"and this set to $parent

You might need the bind syntax instead. Try data-bind="$root.testcall.bind($data, 'asd')"

Why does the onclick fire next function not assigned to it?

Why clicking the button fires the alert? It is assigned to the paragraph, not button.
HTML:
<button onclick="foo()">Click me</button>
<p id="hidden" style="display:none"> I was hidden </p>
Javascript:
function foo(){
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").onclick = innnerClick();
}
function innnerClick(){
alert("Ouch! That hurt!")
}

Because of this line:
// ----------------------------------------------------vv
document.getElementById("hidden").onclick = innnerClick();
Here you call the innnerClick function immediately.
Just remove () after to pass the reference to a function instead of calling it, i.e.
document.getElementById("hidden").onclick = innnerClick;

Since, you need to add the reference of the function like this:
function foo(){
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").onclick = innnerClick;
}
not directly calling it.
Fiddle Demo
In jQuery, we can reproduce the same issue like:
$('button').click(function () {
$('#hidden').show();
$('#hidden').click(innnerClick()); <-- see the function with () here
});
Fiddle Demo
The issue is same here, we just need to pass the function reference to click handler here like:-
$('#hidden').click(innnerClick);
Fiddle Demo