Javascript function change content onclick

Question

I am working on a webpage where I would like to have the text in an area change when the user clicks a link. Here is the code for the section of text I would like to change with the js function.

<div id="banner_left">

   <h2 id="tagmain">This is a title area for the text below - I would like to change this and the below text </h2>
   <p id="tagtext">This is the main text area that I would like to change dynamically when a link is clicked.</p>
   <div class="cleaner_h20"></div>
   <div class="button_01"><a href="#">More</a></div>

</div>

This is the code for the link

<div class="banner_button">
   <a id="support" href="#" onclick="javascript:changeText(args)>Support</a>
</div>

And this is the function code

<script language="javascript" type="text/javascript">
  function changeText(idElement) {
    if(idElement==1){
     document.getElementById.('tagmain').innerHTML ='New title to display';
     document.getElementById.('tagtext').innerHTML ='New text to display.';}
    return false;
 }</script>

The function code will end up with additional conditions to test, but I wanted to get one working first. I'm not quite sure where I went wrong as Java, not Javascript, is my primary language. Any help would be awesome. I would just like to be able to change the content, for example, when a user clicks on the CSS "button"/link for support, rather than changing pages, I would like to change the text in the body of the site. Currently it does not appear to do anything. Thanks in advance. Hope I'm not being thick on this one :)

Anoop · Accepted Answer · 2014-04-18 06:00:53Z

No need for . after getElementById

<script language="javascript" type="text/javascript">
 function changeText(idElement) {
    if(idElement==1){
        document.getElementById('tagmain').innerHTML ='New title to display';
        document.getElementById('tagtext').innerHTML ='New text to display.'; // removed extra }
        return false;
    }
 }
 </script>

HTML changes

<div class="banner_button">
   <a id="support" href="#" onclick="javascript:changeText(1); return false;">Support</a>
</div>

OR you can use jQuery to set html

<script language="javascript" type="text/javascript">
 function changeText(idElement) {
    if(idElement==1){
        $('#tagmain').html('New title to display');
        $('#tagtext').html('New text to display.');
        return false;
    }
 }
 </script>

Eureka!!! I thank you sir. I'm hoping to work more with javascript once I'm done with school this semester.

John Bupit · Accepted Answer · 2014-04-18 06:00:26Z

1

<a id="support" href="#" onclick="javascript:changeText(args)">Support</a>

... and you're missing a quote, I suppose.

answered Apr 18, 2014 at 6:00

John Bupit

10.7k10 gold badges45 silver badges79 bronze badges

Collectives™ on Stack Overflow

Javascript function change content onclick

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related