How do i target a unique id of a button - javascript

My goal is to target unique id of a button using jquery.
For example
<button id="5412313">Remove</button>
<button id="9882813">Remove</button>
<button id="123123123">Remove</button>
<button id="214343">Remove</button>
<button id="3434343">Remove</button>
<button id="4343434">Remove</button>
Jquery
$("#WhatshouldIputInHere?").on("click", function(){
console.log($(this));
});

You can try with remove().
$("button").on("click", function(){
$(this).remove();
//$(this).attr('id');
});
Based on your button label i came to know this.you can do anything with your id which i have commanded .

You can use event object in the handler function, the code is like this:
$('button').on('click', function(event) {
alert(event.target.id);
})
Here's the effect of the code above

$('button').on('click',function(){
console.log($(this));
if($(this).attr('id')=='9882813'){
console.log('button with id '+$(this).attr('id')+'clicked');
}
});

Related

Why is adding event to button not working?

I try to add an EventListener to a button. Here is my code:
<button data-id="g/incider/perry">Kaufen</button>
<script type="text/javascript">
var button = document.getElementById('g/incider/perry');
button.addEventListener(
'click',
function() {
alert("test");
},
false
);
</script>
But the alert is not shown when the button is clicked.
I believe that you are new to the Javascript so will help you out here.
As you see your element <button data-id="g/incider/perry">Kaufen</button> has data-id attribute mentioned but you want to select the element by id as per your code document.getElementById()
Solution: document.getElementById() as the property named it searches for the id attribute in the element so you need to provide id to the element
<button id="uniqueID">Kaufen</button>
and then selecting it with,
const button = document.getElementById('uniqueID');
To Learn more about selectors in JavaScript you can check This Link
Try id instead of data-id.
<button id="g/incider/perry">Kaufen</button>
<script type="text/javascript">
var button = document.getElementById('g/incider/perry');
button.addEventListener(
'click',
function() {
alert("test");
},
false
);
</script>
If you want to use data-id for some reason you have to use the getAttribute() function to get the value of an attribute otherwise just stick with id.
const button = document.getElementById('g/incider/perry');
button.addEventListener('click', () =>
alert("test");
}, false);
<button id="g/incider/perry">Kaufen</button>

Pass clicked element' s attributes in another function

Hello guys I try to figure out how can I pass an element's attributes which I clicked in a different function
To be specific I have a dozen of elements with the same className = online
However each of the elements has one unique id which I assigned to them dynamically.
I use $(document).on because I want to listen on the document, for a click because the elements with className=online are created dynamically too.
$(document).on("click", ".online", isInPrivateChat);
How can I then in a different function for example
function TakeTheidfTheElement(){
//take the id of the element i clicked
}
I know I should use jquery method .attr('id') but cant really make it work.
Thanks
Working fiddle.
You could simply get the id from the callback function isInPrivateChat using this.id like :
function isInPrivateChat(){
alert( this.id );
}
Hope this helps.
$(document).on("click", ".online", isInPrivateChat);
function isInPrivateChat(){
console.log( this.id );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='online' id='id_1'>Btn 1</button>
<button class='online' id='id_2'>Btn 2</button>
<button class='online' id='id_3'>Btn 3</button>
Carry the ID through:
$(document).on("click", ".online", function() {
isInPrivateChat($(this).attr('id')); /* <-- get id and pass it in */
});
then
function TakeTheidfTheElement(idPassed){
// do something with idPassed
}
For the record, Zacaria's answer is the better option - showing this is how you can use .attr('id')
You can pass the whole element to a sub function and there you can use JQuery or straight javascript to get the properties of the element.
$(document).on("click",".online",function() {
getMyId(this);
});
function getMyId(element) {
alert(element.id);
}
If you just wanted to pass the id through to the sub function you can do:
$(document).on("click",".online",function() {
getMyId(this.id);
});
function getMyId(elementID) {
alert(elementID);
}
Here's a fiddle of it working
check the below code snippet
$(document).on("click", ".online", isInPrivateChat);
function isInPrivateChat(event) {
anotherFunctin(event.currentTarget.id);
}
function anotherFunctin(id){
console.log(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="online" id="id">
click me
</div>

button click jquery not working

Should be a really simple answer but I can't figure it out right now. I have this button:
<button id="logout" type="button">Logout</button>
And it's supposed to run this jQuery code within script tags at the bottom of the body:
$("#logout").addEventListener("click", function () {
alert('Button Clicked');
});
However, no alert pops up. I don't get it. Thanks in advance.
addEventListener is a method of DOM element not of jQuery object which is an array-like structure that contains all the selected DOM elements
To attach event using jQuery, use .on => Attach an event handler function for one or more events to the selected elements
Try this:
$("#logout").on("click", function() {
alert('Button Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="logout" type="button">Logout</button>
Using JS:
document.getElementById("logout").addEventListener("click", function() {
alert('Button Clicked');
});
<button id="logout" type="button">Logout</button>
Edit: You can get first DOM element from array-like object returned by jQuery selector using $(SELECTOR)[0] or $(SELECTOR).get(0)
addEventListener() method registers the specified listener on the EventTarget.
If you really want to use addEventListener then write the following code:
var el = document.getElementById("logout");
el.addEventListener("click", function () {
alert('Button Clicked');
}, false);
Otherwise do it with jquery
$(document).on("click", "#logout", function () {
alert('Button Clicked');
});
OR
$("#logout").on("click", function () {
alert('Button Clicked');
});
Alternate answer is:
$(document).on("click", "#logout", function() {
alert('Button Clicked');
});
This works on dynamically created elements as well.
You should use on method to use the event handlers in jquery. The addEventListener is a core JavaScript event method.
$("#logout").on("click", function() {
alert('Button Clicked');
});
You may still use addEventListner forcing jQuery code to JavaScript:
$("#logout")[0] //Now, this is JavaScript Object
.addEventListener("click", function () {
alert('Button Clicked');
});
You can use jQuery click/on function for getting the button to work.
Example:
$("#logout").on("click", function () { alert('Button Clicked'); });
$("#logout").click(function () { alert('Button Clicked'); });
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#logout").on("click", function () {
alert('Button Clicked');
});
});
</script>
</head>
<body>
<button id="logout" type="button">Logout</button>
</body>
</html>
If you go to your console like in firebug and type $() you will see the jQuery object that shows the methods and properties of the jquery function/object. There is no addEventListener on this object.
addEventlistener is a method for the DOM. If you want to take advantage of jQuery by "writing less and do more" use jQuery methods like on. This will allow you to add an event handler on an element.
$(document).on("click", "#logout", function() {
alert('button clicked');
});
var element = document.getElementById("logout");
element.addEventListener("click", myFunction);
function myFunction() {
// your code logic comes here
}

add and remove class on same button or element

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});
To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!
You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this
Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way
You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>
Use toggleClass('show')
It will add the class on one click and remove the class on the second click.
<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>

I need a button click instead of setInterval

I found this code but for my site I need a button instad of setInterval. I tried jquery("#btn").click(function(){}) but can't get it working.
<script>
jQuery().ready(function(){
setInterval("getResult()",1000); //set theinterval for the update
});
function getResult(){
jQuery.post("update.php", function(data) {
jQuery("#readings").html(data);
});
}
</script>
<div id="readings"></div>
You need to add a click event listener to a button. The jsfiddle below should help you. This can be done using pure JavaScript but as you suggested jQuery.
<button id="test">Test</button>
$("#test").click(function() {
alert("Click event!");
});
http://jsfiddle.net/89987ps1/
You can call your function like this:
<button onclick="getResult()" >Get result</button>

Categories