How to get title of onclick button inside javascript function once it is clicked?

Question

I got few onclick buttons inside li . I wonder how I can get the title of each button inside JavaScript function once it is clicked ?I want to set the title of button equal to a variable.Thanks in advance.

<javascript>
    function MyFunction(MyFile,MyImage){

    //here i want to get the title of onclick button which is Mango and set it equal to variable.

    }
    </javascript>

    <li><a id="123456" onclick="setCurrentID('123456');javascript:MyFunction('type=fruit&day=friday','http://somesite.com/Image1.png');">Mango</a><img src="http://www.somesite.com/123456.png"></li>
    <li><a id="123457" onclick="setCurrentID('123457');javascript:MyFunction('type=fruit&day=friday','http://somesite.com/Image2.png');">Apple</a><img src="http://www.somesite.com/123457.png"></li>

Thanks for reply. I mean Mango and Apple in above sample onclick buttons, — user1788736
– user1788736, Commented Feb 28, 2016 at 4:59
How to get Mango and Apple text via jquery or JavaScript once each one get clicked ? — user1788736
– user1788736, Commented Feb 28, 2016 at 5:09
I updated my answer below, I was rushing and gave you the wrong attribute. The function is fixed now. — Munsterlander
– Munsterlander, Commented Feb 28, 2016 at 5:09
Use addEventListeners to handle click and in the listener function this refers to the element which it is clicked. then you can get the title or other attributes of the button. — Prasanna Rkv
– Prasanna Rkv, Commented Feb 28, 2016 at 7:39

Munsterlander · Accepted Answer · 2016-02-28 05:40:41Z

2

You send the id with the onclick function and then you reference the label via:

document.getElementById("myBtn").text;

So basically:

<a id="1" onClick="reply_click(this.id)">B1</a><br />
<a id="2" onClick="reply_click(this.id)">B2</a><br />
<a id="3" onClick="reply_click(this.id)">B3</a>

<script type="text/javascript">
var newText = 'Thank You';
function reply_click(clicked_id)
{
    alert(document.getElementById(clicked_id).text);
    document.getElementById(clicked_id).text = newText;
}
</script>

Edit: Apologies, didn't see you were using anchors instead of buttons as your question mentions, my fault. I also added how to change the text.

edited Feb 28, 2016 at 5:40

answered Feb 28, 2016 at 4:58

Munsterlander

1,3861 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1788736 Over a year ago

Thanks for the example.But I want to B1,B2 and B3 not the ids ! Furthermore , Is it possible that i don't change the structure of on click buttons a lot because the rest of my project depends on same structure !

Munsterlander Over a year ago

Updated with the right code, I meant, firstChild.data not value.

Munsterlander Over a year ago

What do you mean by structure of onclick buttons?

user1788736 Over a year ago

I mean i dont want to change <a id="123457" onclick= to <button id="123457" onClick

Munsterlander Over a year ago

Sorry, totally misread your code based on your question. Updated and working.

|

Rayon · Accepted Answer · 2016-02-28 05:26:53Z

1

Do not use inline-event-binding.

Use innerHTML, it will return HTML/Text content (inner) of an element.

$(SELECTOR).next() will grab the next element...attr() will return specified attribute of the element.

Try this:

var CurrentID;
$('li a').on('click', function(e) {
  e.preventDefault();
  setCurrentID(this.id);
  MyFunction('type=fruit&day=friday', $(this).next('img').attr('src'), this.innerHTML);
});

function setCurrentID(id) {
  CurrentID = id;
}

function MyFunction(MyFile, MyImage, MyTitle) {
  alert('MyFile: ' + MyFile + '  MyImage: ' + MyImage + ' MyTitle:' + MyTitle)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li><a id="123456">Mango</a>
    <img src="http://www.somesite.com/123456.png">
  </li>
  <li><a id="123457">Apple</a>
    <img src="http://www.somesite.com/123457.png">
  </li>
</ul>

Fiddle here

edited Feb 28, 2016 at 5:26

answered Feb 28, 2016 at 5:19

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

3 Comments

Munsterlander Over a year ago

Why not just use the text property of the anchor tag? I feel like I am missing something with how complex your response is from the question.

Rayon Over a year ago

Node.textContent could be used but it will fail IE < 9

Munsterlander Over a year ago

Ah, sometimes forget about backwards compat for IE. Makes sense. Thank you!

Collectives™ on Stack Overflow

How to get title of onclick button inside javascript function once it is clicked?

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related