JS - Programmatically send element with onclick - javascript

<button id="button1">Button</button>
document.getElementById("button1").onclick=function(){ ???.style.display="none" };
As you can see above, how could I change the style to hide it with the onclick?
(and no, I don't want to do <button onclick="x">)

Have a look at this
document.getElementById("button1").onclick=function(e){ e.target.style.display="none" };
<button id="button1">Button</button>

Use srcElement or target. (target is standard and srcElement is alias.)
document.getElementById("button1").addEventListener( "click", e => {
e.srcElement.style.display = "none";
} );
<button id="button1">Button</button>

document.addEventListener("click", function(){
document.getElementById("button1").style.display = "none";
});
<button id="button1">Button</button>
You can use addEventListener and change the style on click.
document.addEventListener("click", function(){
document.getElementById("button1").style.display = "none";
});
<button id="button1">Button</button>

You can use this inside the click handler to refer to the element clicked:
document.getElementById("button1").onclick=function(){
this.style.display="none";
};
<button id="button1">Button</button>
Using this means you could (if you wanted to) use the same handler function on multiple elements. You could also add the event handler with addEventListener as an alternative - this still refers to the element the handler is attached to.

Related

How I know which button been clicked in class of buttons?

I have the class of buttons and I want to know which one been clicked using JavaScript
<button class="editors">Edit</button>
<button class="editors">Edit</button>
<button class="editors">Edit</button>
so I want to know which button is clicked
You can pass this to your function and then you have a reference to the clicked button.
[...document.getElementsByClassName('editors')].forEach(x => {
x.addEventListener('click', function() {
myFunction(this);
})
});
function myFunction(el) {
console.log(el);
}
[...document.getElementsByClassName('editors')].forEach(x => {
x.addEventListener('click', function() {
myFunction(this);
})
});
function myFunction(el) {
console.log(el);
}
<button class="editors">1</button>
<button class="editors">2</button>
<button class="editors">3</button>
You can attach event listener to the document or your button's wrapper element/div and then use the event.target property. That way you use only 1 event listener, instead of attaching multiple for each element. This approach is called Event Delegation. You can check the different event properties here.
document.addEventListener('click', function(evt) {
let element = evt.target;
console.log(`Clicked button: ${element.textContent}`);
});
<button class="editors">Edit</button>
<button class="editors">Details</button>
<button class="editors">Delete</button>

How can I show and hide a button after click?

I tried this:
<button onclick="button_onclick()">Click me</button>
js:
button_onclick() = "this.style.visibility = 'hidden';"
You have a spelling error in visibility and this is not how you define functions in javascript.
You also need to pass down the element reference down as a parameter of the function.
function button_onclick(element) {
element.style.visibility = 'hidden';
}
<button onclick="button_onclick(this)">Click me</button>
OR with inline js:
<button onclick="this.style.visibility = 'hidden'">Click me</button>
There are three problems:
you're calling button_onclick() as a function but it's not defined as one.
using inline onclick is no good
you've misspelled visibality. You should use visibility instead.
If you want to handle events. the best way is to attach an event listener to the element.
const myButton = document.querySelector('.my-button')
myButton.addEventListener('click', () => {
myButton.style.visibility = 'hidden'
})
<button class="my-button">Click me</button>
Easest way of doing
<button onclick="this.style.display = 'none'">Click me</button>
Note this way of doing is not a good practice
So do it in this way
<button id="btn"> Click me </button>
<script>
const btn = document.querySelector ('#btn');
btn.addEventListener ('click', () =>{
btn.style.display = "none"
// btn.style.visibility = "hidden"
})
</script>
Thank you
try this
function button_onclick() {
document.getElementById("btn").style.visibility="hidden";
}
<button id="btn" onclick="button_onclick()">Click me</button>

Get element from which onclick function is called

I have a button with a onclick attribute which is pointing to the function test().
<button onclick="test()">Button 1</button>
<button onclick="test()">Button 2</button>
<button onclick="test()">Button 3</button>
Function test():
function test()
{
var button_name = this.html;
console.log("Im button "+ button_name);
}
How can I get informations about the clicked button?
e.g. How can i read the html?
jsfiddle: https://jsfiddle.net/c2sc9j9e/
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
Four options:
Pass this into the function.
<button onclick="test(this)">Button 1</button>
and then use that argument in the function.
Hook up the handlers with addEventListener or jQuery's on, and then use this within the handler.
var buttons = document.querySelectorAll("selector-for-the-buttons");
Array.prototype.forEach.call(buttons, function(btn) {
btn.addEventListener("click", handler, false);
});
function handler() {
// Use `this` here
}
jQuery version:
$("selector-for-the-buttons").on("click", function() {
// Use `this` here
});
Hook up a single handler on a container these buttons are in, and use the target property of the event object to determine which was clicked (but note that if you use other elements within button, you'll need to loop up to the button first).
document.querySelector("selector-for-the-container").addEventListener("click", function(e) {
// Use `e.target` here
}, false);
jQuery version that handles the possibility of nested elements within the button for you:
$("selector-for-the-container").on("click", "button", function() {
// Use `this` here (note this is different from the DOM version above)
});
I came across an other extremely simple way to do it in Vanilla JS so I post it here for reference:
function whoami () {
var caller = event.target;
alert("I'm " + caller.textContent);
}
<button onclick="whoami()">Button 1</button>
<button onclick="whoami()">Button 2</button>
<button onclick="whoami()">Button 3</button>
I'm not sure about the browser support for it but it works at least on Safari, Firefox and Blink based browsers.
function test(button)
{
var button_name = button.getAttribute('name');
console.log("Im button "+ button_name);
}
<button onclick="test(this)" name="button1">Button 1</button>
<button onclick="test(this)" name="button2">Button 2</button>
<button onclick="test(this)" name="button3">Button 3</button>
If you want to use Jquery, then you can call the $(this) object in the function.
you must pass "this" to function
<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>
<script>
function test(t)
{
console.log(t);
}
</script>
Here is your solution jsfiddle , using jquery.
<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>
<script>
function test(button)
{
var button_name = $(button).html();
alert("Im button "+ button_name);
}
</script>
just add id to each button and pass it to your test function
and here is working jsfiddle
<button onclick="test(this.id)" id="button1">1</button>
<button onclick="test(this.id)" id="button2">2</button>
<button onclick="test(this.id)" id="button3">3</button>
<script>
function test(id)
{
var button_name = id;
alert("Im button name is : "+ button_name);
console.log("Im button name is :"+ button_name);
}
</script>
What you want is the event that triggers the click, and you do that by specifying the function call as MyFunction(event). For example:
<ul>
<li onclick="MyFunction(event)">Red</li>
<li onclick="MyFunction(event)">Orange</li>
<li onclick="MyFunction(event)">Yellow</li>
</ul>
and then your Javascript function can be:
function MyFunction(ev) {
// Now you have access to everything in the event
//- including the triggering element
var element = ev.srcElement;
}
By leaving out the (event) parameter in the specification of the onclick function call you don't get it.

how to judge which button has been clicked using there className instead of ID

I have 100 buttons in a table having same class name but different id c-1,c-2,....,c-n <input type="button" class="btn-c" id="c-1" value="ADD">
how will i Know which button has been clicked using their className and whithout using onclick event on the each button
<input type="button" ... onclick="call_function(this);"
for simplicity let say I want to alert(button.id); on the click of any of the 100 buttons
If you have so many buttons, it makes sense to use event delegation:
$('table').on('click', '.btn-c', function() {
alert(this.id); // will get you clicked button id
});
This is optimal approach for performance standpoint as you bind only one event handler to parent element and benefit from child element event bubbling.
UPD. This is pure javascript version of the same code:
document.getElementById('table').addEventListener('click', function(e) {
if (/\bbtn-c\b/.test(e.target.className)) {
alert(e.target.id);
}
}, false);
Demo: http://jsfiddle.net/zn0os4n8/
Using jQuery - attach a click handler to the common class and use the instance of this to get the id of the clicked button
$(".btn-c").click(function() {
alert(this.id); //id of the clicked button
});
You need to attach an event to a parent element and listen for the clicks. You can than use the event object to determine what is being clicked on. You can check if it is the element you want and do whatever you want.
document.body.addEventListener("click", function (e) { //attach to element that is a parent of the buttons
var clickedElem = e.target; //find the element that is clicked on
var isC = (clickedElem.classList.contains("c")); //see if it has the class you are looking for
var outStr = isC ? "Yes" : "No"; //just outputting something to the screen
document.getElementById("out").textContent = outStr + " : " + clickedElem.id;
});
<button class="d" id="b0">x</button>
<button class="c" id="b1">y</button>
<button class="c" id="b2">y</button>
<button class="c" id="b3">y</button>
<button class="d" id="b4">x</button>
<div id="out"></div>
Note: this is not going to work in older IEs without polyfills.

How to change an input type button to "display=none" once clicked using Javascript?

I have a button that I'm trying to hide once clicked. Also I just don't want to hide it I want it to style='display:none' once clicked.
<button onclick="this.style.display='none';">a button</button>
see example: http://jsfiddle.net/uWfYk/
Update 2020:
With addEventListener() and querySelector() being supported in all major browsers, it can just be
document
.querySelector('#the-important-button')
.addEventListener('click', ev => ev.target.style.display = 'none');
<button id="the-important-button">Click</button>
Answer in 2012:
To make it unobtrusive and work on earlier IE and other modern browsers:
the HTML:
<button id="the-important-button">Submit</button>​
JavaScript:
var theButton = document.getElementById('the-important-button');
function hideTheButton() {
this.style.display = 'none';
}
function addEvent(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler, false);
} else if (target.attachEvent) {
target.attachEvent('on' + type, function() {
return handler.call(target, window.event);
});
} else {
target['on' + type] = handler;
}
}
addEvent(theButton, 'click', hideTheButton);
Note that addEvent is a generic function that works well on earlier IE and other modern browsers. You can add other events similar to the last line of code above.
Sample on http://jsfiddle.net/W37Fb/5/
Attach a onclick event to hide and apply style display:none using JS style, see below,
<input type="button" name="btn" value="Hide me" onclick="this.style.display='none'" />
http://jsfiddle.net/uWfYk/2/
Using jquery as follows
$("#btn").click(function(){
//do need full
$(this).fadeOut();
})​
Using pure JS
http://jsfiddle.net/PeM2b/

Categories