How to correctly write a javascript code that change the text of a div via onClick event

Question

I am new to javascript and I am writing a simple site, I having a problem changing the content of a div when user click any of the menu link. So far I've tried the following code below:

When user click the menu the div text content will change. For example when user click the NEWS menu "<div class="paneltitle" id="contenttitle">Home</div>" should change the content from HOME to NEWS

HTML

 <div id="wrapper">
    <div id="content">
        <div class="menu">

<ul>
  <li><a href="#" onclick="changetitle_home()">Home</a></li>
  <li><a href="#" onclick="changetitle_news()">News</a></li>
  <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
  <li><a href="#" onclick="changetitle_about()">About</a></li>
</ul>   
        </div>


        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
</div>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 5px;
}

a {
    display: block;
    width: 60px;
    text-decoration: none;
}

.menu {
    float: left;
}

.body_content {
    float: left;
    height: 380px;
    background: red;
    width: 620px
}

.paneltitle {
    background: gray;
    width: 98.5%;
    padding: 5px;
}

JS

function changetitle_home() {
document.getElementById("contenttitle").innerHTML = "Home";
}

function changetitle_news() {
document.getElementById("contenttitle").innerHTML = "News";
}

function changetitle_contact() {
document.getElementById("contenttitle").innerHTML = "Contact";
}

function changetitle_about() {
document.getElementById("contenttitle").innerHTML = "About Us";
}

Check my JSfiddle here http://jsfiddle.net/453j50uL/1/

Does it also happen on server? If it fails in jsfiddle, it's because you're calling the javascript code in an onload function, which makes your code nested and therefore inaccessible for html property onclick If you set jsfiddle option to no-wrap in body it will work. — Kaiido
– Kaiido, Commented Jul 9, 2015 at 4:11
@kaiido damn you are correct. I just tried it now it works. thanks dude — Pro Dev
– Pro Dev, Commented Jul 9, 2015 at 4:24

Mark Micallef · Accepted Answer · 2015-07-09 04:31:38Z

The code you posted works just fine when combined into a page and loaded in a browser. Copy and save the following code as a HTML file and load it in a browser. I've stripped out the CSS for clarity but feel free to put it back in.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function changetitle_home() {
            document.getElementById("contenttitle").innerHTML = "Home";
        }
        function changetitle_news() {
            document.getElementById("contenttitle").innerHTML = "News";
        }
        function changetitle_contact() {
            document.getElementById("contenttitle").innerHTML = "Contact";
        }
        function changetitle_about() {
            document.getElementById("contenttitle").innerHTML = "About Us";
        }
    </script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div class="menu">
            <ul>
                <li><a href="#" onclick="changetitle_home()">Home</a></li>
                <li><a href="#" onclick="changetitle_news()">News</a></li>
                <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
                <li><a href="#" onclick="changetitle_about()">About</a></li>
            </ul>   
        </div>

        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
    </div>
</div>
</body>
</html>

A better way to do this would be to have a single re-usable function for setting the title, for example:

function setPageTitle(title) {
    document.getElementById('contenttitle').innerHTML = title;
}

Now, in your function call, pass the desired title as a parameter:

<a href="#" onclick="javascript:setPageTitle('Home');">Home</a>

Agung Santoso · Accepted Answer · 2015-07-09 04:24:27Z

1

Based on your JSFiddle you should change Frameworks & Extensions option under jQuery 1.10.1 to No wrap - in <body>. It should works now!

answered Jul 9, 2015 at 4:24

Agung Santoso

681 silver badge8 bronze badges

1 Comment

Pro Dev Over a year ago

same with its really working I just dont about "No wrap" in jsfiddle @kaiido

shakAttack · Accepted Answer · 2015-07-09 04:26:02Z

I dont have enough reputation to comment so it is in the answer block. Just copy your functions in a script block and paste it above the . I tried and it works.

<div id="wrapper">
<div id="content">
    <div class="menu">
        <script>    function changetitle_home() {
    document.getElementById("contenttitle").innerHTML = "Home";
}
function changetitle_news() {
    document.getElementById("contenttitle").innerHTML = "News";
}
function changetitle_contact() {
    document.getElementById("contenttitle").innerHTML = "Contact";
}
function changetitle_about() {
    document.getElementById("contenttitle").innerHTML = "About Us";
}
        </script>            
<ul>
  <li><a href="#" onclick="changetitle_home()">Home</a></li>
 <li><a href="#" onclick="changetitle_news()">News</a></li>
 <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
 <li><a href="#" onclick="changetitle_about()">About</a></li>
</ul>   
    </div>


    <div class="body_content">
        <div class="paneltitle" id="contenttitle">Home</div>
    </div>    
</div>

thanks!

Soundar · Accepted Answer · 2015-07-09 04:28:26Z

1

Your code having no problem and it should works. The script placement in the fiddle only cause the problem.

I have moved the scripts inside the HTML content, now it works fine as you expected.

Check this Fiddle: Demo

answered Jul 9, 2015 at 4:28

Soundar

2,5891 gold badge18 silver badges27 bronze badges

Comments

nordicbeans · Accepted Answer · 2015-07-09 04:43:02Z

You need to change the way you are defining your functions. If you define them as below they will be hang off the window object so you will be able to reference them from your html. Please take a look at the following jsfiddle for a working version: https://jsfiddle.net/3o3rk889/1/

changetitle_home = function() {
        document.getElementById("contenttitle").innerHTML = "Home";
}
changetitle_news = function(){ 
    document.getElementById("contenttitle").innerHTML = "News";
}
changetitle_contact = function() {
    document.getElementById("contenttitle").innerHTML = "Contact";
}
changetitle_about = function() {
    document.getElementById("contenttitle").innerHTML = "About Us";
}

The way you are defining them leaves them with no handle. Also, top tip: you can use the Dev tools with fiddler (F12 in chrome or IE) and that will show you any errors in the javascript. Doing this showed an undefined error when for those functions when clicking a button.

Christopher Reid · Accepted Answer · 2015-07-09 05:27:10Z

1

http://codepen.io/anon/pen/vOjNRw

I know this has already been answered, but for the sake of writing nice javascript and keeping your HTML clean (not using onclick) Here is how I would do this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

    var contentTitle = document.getElementById("contenttitle");
    var links = document.querySelectorAll("#navigation a");

    Array.prototype.forEach.call(links, function(link){
      link.addEventListener('click', function(e){
        contentTitle.innerHTML = e.target.innerHTML;
      }, false);
    });

</script>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div class="menu">
                <ul id="navigation">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About Us</a></li>
                </ul>   
            </div>

        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
    </div>
</div>
</body>
</html>

edited Jul 9, 2015 at 5:27

answered Jul 9, 2015 at 4:50

Christopher Reid

4,4914 gold badges41 silver badges82 bronze badges

2 Comments

Christopher Reid Over a year ago

@AlexNewbie woops, i left the class on the ul, it should be an id notice that the second line of javascript is looking for #navigation a, not .navigation a. I left a codepen so you can try it out.

Pro Dev Over a year ago

nice one, i think this is much better. thanks @AllTheTime

Vinaya Maheshwari · Accepted Answer · 2015-07-09 04:21:38Z

Just change your script from

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
    function changetitle_home() {
        document.getElementById("contenttitle").innerHTML = "Home";
    }
    function changetitle_news() {
        document.getElementById("contenttitle").innerHTML = "News";
    }
    function changetitle_contact() {
        document.getElementById("contenttitle").innerHTML = "Contact";
    }
    function changetitle_about() {
        document.getElementById("contenttitle").innerHTML = "About Us";
    }

});//]]>  

</script>

To:

<script type="text/javascript">//<![CDATA[ 

    function changetitle_home() {
        document.getElementById("contenttitle").innerHTML = "Home";
    }
    function changetitle_news() {
        document.getElementById("contenttitle").innerHTML = "News";
    }
    function changetitle_contact() {
        document.getElementById("contenttitle").innerHTML = "Contact";
    }
    function changetitle_about() {
        document.getElementById("contenttitle").innerHTML = "About Us";
    }

//]]>  

</script>

leo.fcx · Accepted Answer · 2015-07-09 04:40:45Z

0

For all links you could use a unique function that looks like this one:

var changeTitle = function(target){
   document.getElementById("contenttitle").innerHTML = target.innerHTML;
};

Your HTML for you menu will look like

<ul>
  <li><a href="#" onclick="changeTitle(this)">Home</a></li>
  <li><a href="#" onclick="changeTitle(this)">News</a></li>
  <li><a href="#" onclick="changeTitle(this)">Contact</a></li>
  <li><a href="#" onclick="changeTitle(this)">About</a></li>
</ul>

Another alternative is definitely using jQuery:

$('div.menu a').click(function(e){
    $('#contenttitle').text($(e.target).text());
});

edited Jul 9, 2015 at 4:40

answered Jul 9, 2015 at 4:12

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

3 Comments

Pro Dev Over a year ago

I dont really understand how ur code works. please give example @leo.fcx

leo.fcx Over a year ago

Just improved my response by adding the HTML code change. Also provided another alternative by using jQuery.

Pro Dev Over a year ago

i like you idea, but I dunno how to use it on my fiddle here jsfiddle.net/453j50uL @leo.fcx

tapos ghosh · Accepted Answer · 2015-07-09 04:20:46Z

-2

see my example code then you understand how javascript onclick event occurred .

SEE DEMO

<ul>
    <li class="abc" data-id="abc1">Home</li>
    <li class="abc" data-id="abc2">about</li>
    <li class="abc" data-id="abc3">serive</li>
    <li class="abc" data-id="abc4">contact</li>
</ul>
<div class="mm" id="abc1">Home worlld</div>
<div class="mm" id="abc2">about worlld</div>
<div class="mm" id="abc3">Service worlld</div>
<div class="mm" id="abc4">Contact worlld</div>

$(document).ready(function(){
    $(".mm").hide();
    $("#abc1").show();
    $(".abc").click(function(){
          var mm = $(this).data("id");
            $(".mm").hide();
            $("#"+mm).show();
      });
});

edited Jul 9, 2015 at 4:20

answered Jul 9, 2015 at 4:11

tapos ghosh

2,22226 silver badges38 bronze badges

3 Comments

Pro Dev Over a year ago

how to show a default title, for example on page load the Home Worlld will show.

tapos ghosh Over a year ago

now see this it by defaullt show the home menu description

Pro Dev Over a year ago

yeah, nice @taposghosh

Collectives™ on Stack Overflow

How to correctly write a javascript code that change the text of a div via onClick event

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related