Change the title on click of

Question

Following is code of menu and its script when i click on menu i want to chage the title of page...below code is not working...please help me...

<script>
  function myFunction() 
  {  
    document.title = document.getElementsByClassName("MENU").text;
 }
</scipt>

<ul class="menu">
<li><a class="MENU" href="#" onclick="javascript:myFunction();">About Us</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction();">Rooms</a></li>
       
<li><a class="MENU" href="#" onclick="javascript:myFunction();">Reservation</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction();">Gallery</a></li>
                            
<li><a class="MENU" href="#" onclick="javascript:myFunction();">Contact Us</a></li> 
       
</ul> <!-- /.menu -->

Timur Osadchiy · Answer 1 · 2015-03-03T12:28:33.300

Try the following:

function myFunction() 
      { 
        document.title = event.target.text;
     }

    <ul class="menu">
    <li><a class="MENU" href="#" onclick="javascript:myFunction();">About Us</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Rooms</a></li>
           
    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Reservation</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Gallery</a></li>
                                
    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Contact Us</a></li> 
           
    </ul>

no its not working i tried this... will you please give me any other suggestion.... — Vijaya Savant, Mar 03 '15 at 12:14

score 0 · Answer 2 · answered Mar 03 '15 at 12:14

0

Try this..

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<ul class="menu">
<li><a class="MENUNAME" href="javascript:;" >About Us</a></li>

<li><a class="MENUNAME" href="javascript:;" >Rooms</a></li>

<li><a class="MENUNAME" href="javascript:;">Reservation</a></li>

<li><a class="MENUNAME" href="javascript:;" >Gallery</a></li>

<li><a class="MENUNAME" href="javascript:;" >Contact Us</a></li> 

</ul> <!-- /.menu -->
<script>
 $(".MENUNAME").click(function(){

 document.title = $(this).html();
 });
</script>

answered Mar 03 '15 at 12:14

Deenadhayalan Manoharan

5,227
13
26
47

2

jQuery isn't tagged in this question. It's always nice to have optional methods but it would be a good idea to clearly point out this is a jQuery method. – NewToJS Mar 03 '15 at 12:15
when i used above code then it showing me default title given at title tag instead menu name... – Vijaya Savant Mar 03 '15 at 12:27
did you need default title tag when page load? – Deenadhayalan Manoharan Mar 03 '15 at 12:37

NewToJS · Answer 3 · 2015-03-03T13:01:05.863

This should work fine for you.

Remove the onclick attributes javascript will take care of the rest.

Javascript

function Events(){
var nav=document.getElementsByClassName('MENU');
//Set Event Listeners for all elements with the class MenuItem
for(var i=0; i<nav.length; i++){
nav[i].addEventListener('click',myFunction,false);
}
}
function myFunction(){
    document.title=event.target.innerHTML;
}

window.onload=Events;

HTML:

<ul class="menu">
<li><a class="MENU" href="#">About Us</a></li>
<li><a class="MENU" href="#">Rooms</a></li>                         
<li><a class="MENU" href="#">Reservation</a></li>
<li><a class="MENU" href="#">Gallery</a></li>                           
<li><a class="MENU" href="#">Contact Us</a></li>                        
</ul>

Note: You don't need to add the onclick attribute on your menu elements. window.onload will call the Events function, this will set the onclick events for each element. myFunction will target the innerHTML of the element used to fire the function.

You can use .innerHTML OR .text

I hope this helps. Happy coding!

score 0 · Answer 4 · answered Mar 03 '15 at 12:39

Can you try this, You can use innerHTML to get the li tag text

<script>
  function myFunction(d) 
  {  
    document.title = d.innerHTML;
 }
</script>

<ul class="menu">
    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">About Us</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li> 

</ul> <!-- /.menu -->

score 0 · Answer 5 · edited May 23 '17 at 11:56

You have to pass the value into your function.getElementsByClassName just takes all class elements 'MENU'. The following code worked for me:

<script>
  function myFunction(myValue) 
  {  
    document.title = myValue
 }
</script>
<ul class="menu">
<li><a class="MENU" href="#" onclick="javascript:myFunction('About Us');">About Us</a></li>



<li><a class="MENU" href="#" onclick="javascript:myFunction('Rooms');">Rooms</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction('Reservation');">Reservation</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction('Gallery');">Gallery</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction('Contact Us');">Contact Us</a></li> 

</ul> <!-- /.menu -->

Note that you wrote your ending script wrong. change scipt to script.

Also note that this might not be the best way to change titles if we talk about SEO, see: How to dynamically change a web page's title?

You don't **"have to"** pass the value to anything. You can get the innerHTML/text from the event. Also getElementsByClassName will step through like an array getElementsByClassName()[0] / getElementsByClassName()[1] / getElementsByClassName()[2] — NewToJS, Mar 03 '15 at 12:51

score 0 · Answer 6 · answered Mar 03 '15 at 13:25

$('.menu li a').on('click', function(e) { e.preventDefault(); $(document).attr("title", e.target.text); });

This will work. Please check if you are in a iframe or not. If you are in a iframe then it won't work it will set the title for that perticular iframe only.

Code below will set title for parent window of an iframe. However, make sure parent window and iframe are served from same domain.

$('.menu li a').on('click', function(e) { e.preventDefault(); window.parent.document.title = e.target.text; });

Change the title on click of

6 Answers6