CODEWITHSUNDEEP
javascripthtml
Pro Dev
Pro Dev

Reputation: 684

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

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/

Upvotes: 0

Views: 164

Answers (9)

Christopher Reid
Christopher Reid

Reputation: 4484

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>

Upvotes: 1

nordicbeans
nordicbeans

Reputation: 11

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.

Upvotes: 1

leo.fcx
leo.fcx

Reputation: 6457

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());
});

Upvotes: 0

Mark Micallef
Mark Micallef

Reputation: 2788

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>

Upvotes: 1

Soundar
Soundar

Reputation: 2589

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

Upvotes: 1

shakAttack
shakAttack

Reputation: 181

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!

Upvotes: 1

Agung Santoso
Agung Santoso

Reputation: 68

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

Upvotes: 1

Vinaya Maheshwari
Vinaya Maheshwari

Reputation: 575

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>

Upvotes: 0

tapos ghosh
tapos ghosh

Reputation: 2202

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();
      });
});

Upvotes: -2

Related Questions