We Keep Coding

Return the data-football attribute name

If I have the following piece of code:
<button id="btnOne" data-football="Mitre">Press Me</button>
How would I get the name of the data tag, so in this case it would be 'data-football'. I know how I would get the value but would like to know how I can get the name of the data-tag - in this case data-football when the button is pressed.
i.e,
$(document).on("click", "button", function(){
// Get the name of the attribute (data-football - not the value);
});
Thanks.

You can use attributes property for getting the all attributes of a HTML tag
<div id="_id" data-football='test'></div>
<script>
const attrs = document.getElementById('_id').attributes
const keyName = attrs[1].nodeName // will be data-football
</script>

Try one of the following.
$(document).on("click", "button", function(){
$(this).data('data-football')
});
Or
$(document).on("click", "#btnOne", function(){
$(this).data('data-football')
});
Read More about jQuery data

How to change button text when clicked?

I am running my website off of squarespace and I have a button that says "DELIVER ME" but when you click it, I want it to say "G.T.F.O" while the next page loads.
I don't have a code for this and need help writing one.
function changeButtonText(DELIVER ME, G.T.F.O.){
if (this.value== "DELIVER ME"){
this.value = "G.T.F.O.";
} else {
this.value = "DELIVER ME";
}
}
changeButtonText();
I want the button to say "DELIVER ME" until you click it, then once you click it the button will say "G.T.F.O."

I want the button to say "DELIVER ME" until you click it, then once you click it the button will say "G.T.F.O."
Given this button:
<input type="button" id="myButton" value="DELIVER ME">
You could do it like this:
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
this.value = "G.T.F.O."
});
Or, if the button is like this:
<button id="myButton">DELIVER ME</button>
You would do:
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
this.innerText = "G.T.F.O."
});

function changeText() {
return document.querySelector("#button").innerHTML = "New text";
}
document.addEventListener("click", changeText);
<button type="button" id="button">Text</button>

most of the answer can solve your particular problem but I just want to add more information about selecting htmlElement.
in VanillaJS(pure Javascript) DOM. you can select element with 3 DOM method.
Select by ID's attribute
elem = document.getElementById("id")
Select by class attribute
elem = document.getElementsByClassName("class")
Select by TagName
elem = document.getElementByTagName("Tag")
and 1 more extra way which used.
elem = document.querySelector(selector)
selector can be one of ".class","#id", or "Tags"
Thanks

<button type="button" id="btn" onclick=changeButtonText()>deliver me</button>
<script>
function changeButtonText(){
document.getElementById("btn").innerHTML = "GTFO";
}
</script>

Replace button text onclick JS

I'm trying to change button text on button click so that the text changes from 'Copy' to 'Copied!' as part of a custom clipboard setup. Here is the code I'm using:
HTML:
<button id="copyButton2">Copy</button>
JS:
<script>
jQuery(".copyButton2").click(function () {
jQuery(this).text(function(i, v){
return v === 'Copy' ? 'Copied!' : 'Copy'
})
});
</script>
which doesn't appear to be working correctly.
I have also tried modifying this solution to no avail. Is there an obvious reason why this isn't working?

You've set copyButton2 as the id of the element, yet you're using a class selector. You need to prefix the selector with #, not .
Also note that, depending on where you're running the jQuery code, you may also need to include a document.ready handler. Try this:
jQuery(function($) {
$("#copyButton2").click(function() {
$(this).text(function(i, v) {
return v === 'Copy' ? 'Copied!' : 'Copy'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="copyButton2">Copy</button>

Please use id selector ("#copyButton2") instead of class selector as you have used id for the close button.

Here's a javascript solution while we're at it.
<script>
var testDiv = document.getElementById('test');
testDiv.onclick = function(){
testDiv.innerHTML = "Copied!"
};
</script>

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>

how to get id of button which user know only few characters on other button click?

I created a button dynamically whose id is started from "abc" .can we get whole button id on any other button click ?
I found this $('[id^=abc]') some thing but not work for me..?

$('#get_id').click(function(){
alert($('[id^=abc]').attr('id'));
});
Here is a simple jsfiddle

May be you want something like this:
$('#otherBTN').on("click", function(){
alert($('[id^="abc"]').attr('id')); // alerts the full id of it
});
if you want to make array out of it:
$('#otherBTN').on("click", function(){
var ids = $('[id^="abc"]').map(function(){
return this.id;
}).get();
console.log(ids); // this logs every id started with abc
});

This is a sample button set.
<button id='abc1'>B1</button>
<button id='abc2'>B2</button>
<button id='abc3'>B3</button>
<button id='abc4'>B4</button>
<button id='abc5'>B5</button>
And Jquery click function for each buttons
$(document).ready(function(){
$('[id^=abc]').click(function(){
alert($(this).attr('id'));
});
});
Demo here. I think this will help you

Your dynamic button id = 'abc'
and in case if you want get id of this on click of another button with id 'xyz'
$("#xyz").on('click', function(){
var BtnIdVal = $("input[type='button'] [id*='abc']").attr("id"); //
});
Note - considering only one dynamic button with id='abc'
or
$("#xyz").on('click', function(){
var BtnIdVal = $("input[type='button'] [id^='abc']").attr("id"); //
});

$('#anybuttonid').on("click",function(){
alert($("[id^='abc']").attr("id"));// by jQuery
});