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>

How to get element from DOM and set onclick event?

I have this html element:
<table id="miniToolbar">
<tbody>
<tr><td>
<button id="btnStrView" type="button" onclick='parent.ExecuteCommand()' class="button_air-medium">
<img id="streetView" class="miniToolbarContant" src="../stdicons/streetview-icon.png"></button>
</td></tr>
<tbody>
</table>
as you can see inside button I have on click event:
onclick='parent.ExecuteCommand()'
And I have this JS function:
function isMenuItemMasked(item)
{
var funcId = '75';
var elem = document.getElementById('btnStrView');
return false;
}
as you can see inside function I have variable called funcId.
I need to put this funcId to the on click event:
onclick='parent.ExecuteCommand('75')'
After I fetch element and put it inside elem variable how do I put funcId as parameter to parent.ExecuteCommand()?

I think you want to set the function argument dynamically. Without using external libraries I would do as follows:
function runSubmit() {
var value = document.getElementById("text").value;
document.getElementById("run").addEventListener('click', function() {
func(value);
});
}
function func(value) {
console.log(value);
}
<input id="text" type="text">
<input type="submit" value="Setup Param" onclick="runSubmit()">
<input id="run" type="submit" value="Run with param">
How to use this: When you run the snippet, you will see a text input, a Setup Param button and a Run with param button. Insert something in the text input and click Setup Param. After, click on Run with param to see the effect
The input text contains the string that will be used as parameter for func(value). The update of #run button callback is triggered by the "Setup param", through the runSubmit() callback. This callback adds to the #run element a listener for the 'click' event, that runs a function with the parameter fixed when event occurs.
This is only a MCVE, you should adapt it to your case scenario.
Mh... Actually #jacob-goh gave you this exact solution in a comment while I wrote this...

you can use jquery to call you function from inside the function and pass your variable to that function.
function isMenuItemMasked(item)
{
var funcId = "75";
$(document).ready(function(){
$("#btnStrView").click(function(){
parent.ExecuteCommand(funcId);
});
});
}
function ExecuteCommand(your_var){
alert(your_var);
//your code
}

Add onclick to element, but keep current onclick event

Is it possible to add a javascript event to a DOM element that already has a onclick event, but I want to keep that event property.
I have radio buttons like this:
<input type="radio" name="checkout-payment" value="56" id="checkout-payment-56" class="checkout-radio checkout-payment-radio checkout-payment-radio" onclick="paymentChanged(this);" />
in which I want to add
window.location.href=window.location.href
while keeping the original onclick, but I have no access to the html, I can only modify through javascript.
so my desired code will be
<input type="radio" name="checkout-payment" value="56" id="checkout-payment-56" class="checkout-radio checkout-payment-radio checkout-payment-radio" onclick="paymentChanged(this); window.location.href=window.location.href" />

Wrap the
window.location.href=window.location.href
in function, lets call it
onRadioButtonClick()
then, just do
var self = this; //keep the context of the file
$("[name=checkout-payment]").on('click', function () {
onRadioButtonClick.call(self); //call the method with the normal context.
//continue code..
});

You could try:
var curHandler = $('#checkout-payment-56').attr("onclick");
$('#checkout-payment-56')[0].onclick = null;
$('#checkout-payment-56').click(function () {
window.location.href=window.location.href;
});

I actually found out there was a much simpler way to acheive my desired result.
$( '.webshop-checkout input[type="radio"]' ).click(function() {
location.reload(true);
});
i am sorry i was not clear in my original post, and it has been edited.

If you want to add this to every .webshop-checkout input[type="radio"], you could do it that way:
$('.webshop-checkout input[type="radio"]').click(function(){
window.location.href=window.location.href;
});
JS Fiddle Demo

$("#checkout-payment-56" ).bind( "click", function(evt) {
console.log('that works');
//sessionStorage.setItem(evt.target.id,evt.target.className);
});

Javascript Function get elements contents

I was using a listener to trigger a certain code:
$(".item-actions > .like-button").click(function (e) {
oid = $(this).parent().attr('data-oid');
alert(oid);
});
Now instead of a listener I'm simply calling the function on the HTML.
CLICK
I'm having problems getting the element's content, and parent content as I'm not able to use $(this) to select them. How can I do the same I was doing with the function?
I first tried this which didn't work:
function alertOID() {
oid = $(this).parent().attr('data-oid');
alert(oid);
}
How can this be done?

Is it what you are looking for?
<input class="like-button" onClick="alertOID.call(this);">

on .like-button html onclick event call alertOID() like this alertOID(this)
<input class="like-button" onClick="alertOID.call(this);">
instead of
<input class="like-button" onClick="alertOID.call();">
and change alertOID like this
function alertOID(element) {
oid = $(element).parent().attr('data-oid');
alert(oid);
}

Hiding a button in Javascript

In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?

You can set its visibility property to hidden.
Here is a little demonstration, where one button is used to toggle the other one:
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>

visibility="hidden"
is very useful, but it will still take up space on the page. You can also use
display="none"
because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")

Something like this should remove it
document.getElementById('x').style.visibility='hidden';
If you are going to do alot of this dom manipulation might be worth looking at jquery

document.getElementById('btnID').style.visibility='hidden';

//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";
of course if you are doing a lot of stuff like this, use jQuery

If the space on that page is not disabled then put your button inside a div.
<div id="a1">
<button>Click here</button>
</div>
Using Jquery:
<script language="javascript">
$("#a1").hide();
</script>
Using JS:
<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>

when you press the button so it should call function that will alert message. so after alert put style visible property .
you can achieve it using
function OpenAlert(){
alert("Getting the message");
document.getElementById("getMessage").style.visibility="hidden";
}
<input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>
Hope this will help . Happy to help

function popAlert(){
alert("Button will be hidden on click");
document.getElementById("getMessage").style.visibility="hidden";
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Hiding a button in Javascript after click</b>
<br><br>
<input type="button" id="getMessage" value="Hide Button OnClick" onclick="popAlert()"/>

If you are not using jQuery I would suggest using it. If you do, you would want to do something like:
$( 'button' ).on(
'click'
function ( )
{
$( this ).hide( );
}
);

<script>
$('#btn_hide').click( function () {
$('#btn_hide').hide();
});
</script>
<input type="button" id="btn_hide"/>
this will be enough

You can use this code:
btnID.hidden = true;

var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
} //for 1 sec delay