CODEWITHSUNDEEP
javascriptjquery
newbie
newbie

Reputation: 55

jQuery/js- How to get Menu Name from a href based class

I want to get the menu name when user is click.

<a class="menu" onclick="getMenu()" href="#"> Home </a>
<a class="menu" onclick="getMenu()" href="#"> About</a>
<a class="menu" onclick="getMenu()" href="#"> Contact</a>

So in this function the alert name will popup.

function getMenu(){
 //the code declare here
alert('is click');
}

The expected result Home is click / Contact is click

Upvotes: 0

Views: 1457

Answers (4)

Oleksandr T.
Oleksandr T.

Reputation: 77482

Like so, pass this (refers to current element) to your function getMenu, and to get content from links you can use .innerHTML.

function getMenu(el) {
  alert(el.innerHTML + ' is click');  
}
<a class="menu" onclick="getMenu(this)" href="#"> Home </a>
<a class="menu" onclick="getMenu(this)" href="#"> About</a>
<a class="menu" onclick="getMenu(this)" href="#"> Contact</a>

also you can use .textContent for get inner text, but be aware IE lower than 9 does not support it, also there is .innerText but FF does not support it, you can use small workaround to get inner text in all bworsers, like so 

alert((el.innerText || el.textContent) + ' is click');

Upvotes: 2

NewToJS
NewToJS

Reputation: 2772

If you would like a jQuery method....

You don't need the onclick attribute

this - The element used to trigger the function

.textContent - The text content of the element

.trim() - Remove white spaces

this.textContent.trim()

Element > text content > trim

$('.menu').click(function(){
alert(this.textContent.trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="menu" href="#"> Home </a>
<a class="menu" href="#"> About</a>
<a class="menu" href="#"> Contact</a>

I hope this helps. Happy coding!

Upvotes: 2

Pratik Joshi
Pratik Joshi

Reputation: 11693

Use a cleaner way as you are using jQuery:

<a class="menu" id="1"  href="#"> Home </a>
<a class="menu" id="2"  href="#"> About</a>
<a class="menu" id="3"  href="#"> Contact</a>

<script>
$(".menu").click(function(){
    var currentId = $(this).attr("id");
    alert($.trim($("#"+currentId).text()));
});
</script>


$(".menu").click(function(){
        var currentId = $(this).attr("id");
        alert($.trim($("#"+currentId).text()));
    });
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="menu" id="1"  href="#"> Home </a>
    <a class="menu" id="2"  href="#"> About</a>
    <a class="menu" id="3"  href="#"> Contact</a>

Upvotes: 1

dfsq
dfsq

Reputation: 193281

Pass clicked element object to the function:

<a class="menu" onclick="getMenu(this)" href="#"> Home </a>

and then read textContent or innerHTML property of it:

function getMenu(obj) {
    alert(obj.textContent);
}

Also you might want to trim out white spaces around the text:

obj.textContent.trim();

Check the demo below.

function getMenu(obj) {
    alert(obj.textContent.trim());
}
<a class="menu" onclick="getMenu(this)" href="#"> Home </a>
<a class="menu" onclick="getMenu(this)" href="#"> About</a>
<a class="menu" onclick="getMenu(this)" href="#"> Contact</a>

Upvotes: 2

Related Questions