AJAX

please help onClick js code

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2009

Posts: 15

Reputation: dmmajorstudent is an unknown quantity at this point

Solved Threads: 0

dmmajorstudent dmmajorstudent is offline

Offline

Newbie Poster

please help onClick js code

Nov 4th, 2009

hello, i'm a student trying create a website using javascript. i am not familiar with javascript and i must use it to change only the content on my page. i have been stuck on this for days and i just cannot get it right.

using the 960 grid on the website what is the code to remove the behavior of my sidebar links?

also how do i add an onClick feature to my sidebar links?

the last question i have is. what is the correct code to change only the content of the page while everything else remains the same??

This is my html for the side bar and content div.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!--HOT RODS LINKS -->
 
<div class="grid_3" id="car_links">
   <script type="text/javascript" src="js/hotrods.js">
    <ul>
	<li ><a href="#">Famous Hot Rods</a></li>
    <li><a href="#">Electric Cars</a></li>
    <li ><a href="#">Pre World War II</a></li>
   </script>   
 
</ul>
</div>
<!--CONTENT -->
 
 
<div class="grid_8" id="content"> 
 
<p>Click On list for Hot Rod List for details. </p>
 <p id="text1"> 
 </p>
 
 
 
 
   </div>   
 
        <div class="clear"></div>
<!--HOT RODS LINKS -->

<div class="grid_3" id="car_links">
   <script type="text/javascript" src="js/hotrods.js">
    <ul>
	<li ><a href="#">Famous Hot Rods</a></li>
    <li><a href="#">Electric Cars</a></li>
    <li ><a href="#">Pre World War II</a></li>
   </script>   

</ul>
</div>
<!--CONTENT -->


<div class="grid_8" id="content"> 

<p>Click On list for Hot Rod List for details. </p>
 <p id="text1"> 
 </p>

    
    
    
   </div>   
       
        <div class="clear"></div>

Last edited by Ezzaral; Nov 4th, 2009 at 12:27 pm. Reason: Added [code] [/code] tags. Please use them to format any code that you post.

•

Join Date: Mar 2008

Posts: 318

Reputation: Thirusha is an unknown quantity at this point

Solved Threads: 51

Thirusha

Offline

Posting Whiz

Nov 4th, 2009

•

Originally Posted by dmmajorstudent

hello, i'm a student trying create a website using javascript. i am not familiar with javascript and i must use it to change only the content on my page. i have been stuck on this for days and i just cannot get it right.

a good place to learn javascript is w3schools

•

Originally Posted by dmmajorstudent

using the 960 grid on the website what is the code to remove the behavior of my sidebar links?

I have no idea what this means

•

Originally Posted by dmmajorstudent

also how do i add an onClick feature to my sidebar links?

you add an onclick event like this:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<a onlick="somejsfunction()">click here</a>

•

Originally Posted by dmmajorstudent

the last question i have is. what is the correct code to change only the content of the page while everything else remains the same??

for this you will use ajax, which you can also learn at w3schools here

Life... Is a Moment

•

Join Date: Nov 2009

Posts: 15

Reputation: dmmajorstudent is an unknown quantity at this point

Solved Threads: 0

dmmajorstudent dmmajorstudent is offline

Offline

Newbie Poster

Nov 4th, 2009

•

Originally Posted by Thirusha

a good place to learn javascript is w3schools

I have no idea what this means

you add an onclick event like this:
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<a onlick="somejsfunction()">click here</a>
<a onlick="somejsfunction()">click here</a>
for this you will use ajax, which you can also learn at w3schools here

I've tried using w3 schools. been doing it for the last couple days and every time i go back and reedit the coding i cannot get it to work. its very frustrating. i've been trying to use documentwrite and getElementById.
what is the code to change content within my content div?

•

Join Date: Oct 2009

Posts: 17

Reputation: futingkiller is an unknown quantity at this point

Solved Threads: 2

futingkiller futingkiller is offline

Offline

Newbie Poster

Nov 4th, 2009

if you want to change only a part of the text from inside of your website try something like this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function change_content()
{
document.getElementById('content').innerHTML='the new text';
}
function change_content()
{
document.getElementById('content').innerHTML='the new text';
}

and you call this function on a onclick envent... something like:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div id='content' onclick='change_content()'>click here</div>

i didn't understand exactly what you want... this is what i understood

•

Join Date: Nov 2009

Posts: 15

Reputation: dmmajorstudent is an unknown quantity at this point

Solved Threads: 0

dmmajorstudent dmmajorstudent is offline

Offline

Newbie Poster

Nov 4th, 2009

ah sorry i wasn't clear. using an onClick code. i wanted to know what the javascript code is so that any time i click on the links below only the content in the . w3 schools isn't helping me that much and neither is the book i have. i have never used javascript before.

<div class="grid_8" id="content"> would change.

so within these links. i would have paragraphs of different information in each link. the famous hot rods links would have its own information and electric cars...

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<li ><a href="#">Famous Hot Rods</a></li>
<li><a href="#">Electric Cars</a></li>
<li ><a href="#">Pre World War II</a></li>
</script>
<li ><a href="#">Famous Hot Rods</a></li>
<li><a href="#">Electric Cars</a></li>
<li ><a href="#">Pre World War II</a></li>
</script>

Last edited by peter_budo; Nov 5th, 2009 at 7:07 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

•

Join Date: Oct 2009

Posts: 17

Reputation: futingkiller is an unknown quantity at this point

Solved Threads: 2

futingkiller futingkiller is offline

Offline

Newbie Poster

Nov 4th, 2009

•

Originally Posted by dmmajorstudent

ah sorry i wasn't clear. using an onClick code. i wanted to know what the javascript code is so that any time i click on the links below only the content in the . w3 schools isn't helping me that much and neither is the book i have. i have never used javascript before.

<div class="grid_8" id="content"> would change.

so within these links. i would have paragraphs of different information in each link. the famous hot rods links would have its own information and electric cars...
<li ><a href="#">Famous Hot Rods</a></li>
#
<li><a href="#">Electric Cars</a></li>
#
<li ><a href="#">Pre World War II</a></li>
#
</script>

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<li ><a href="javascript:change_content('Famous Hot ROds');">Famous Hot Rods</a></li>
 
<li><a href="javascript:change_content('electric cars');">Electric Cars</a></li>
 
<li ><a href="javascript:change_content('pre ww2');">Pre World War II</a></li>
<li ><a href="javascript<b></b>:change_content('Famous Hot ROds');">Famous Hot Rods</a></li>

<li><a href="javascript<b></b>:change_content('electric cars');">Electric Cars</a></li>

<li ><a href="javascript<b></b>:change_content('pre ww2');">Pre World War II</a></li>

and the function is:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function change_content(a)
{
document.getElementById('content').innerHTML=a;
}
function change_content(a)
{
document.getElementById('content').innerHTML=a;
}

this script changes the content in the div that has the ID "content" into what he receives in the function: change_content('pre ww2'); when you click the links
if you want to write something diferent, change the
document.getElementById('content').innerHTML=a; into something diferent.
hope you understood

•

Join Date: Nov 2009

Posts: 15

Reputation: dmmajorstudent is an unknown quantity at this point

Solved Threads: 0

dmmajorstudent dmmajorstudent is offline

Offline

Newbie Poster

Nov 4th, 2009

thanks alot. this is starting to help me. now without using inner html. how do i add in specific paragraphs of information to these assigned links. like lets take famous cars for example.. and i write all this information about it. in javascript without using innerhtml how do i change the content and place it into the content div every time i click on one of those links?

•

Join Date: Oct 2009

Posts: 17

Reputation: futingkiller is an unknown quantity at this point

Solved Threads: 2

futingkiller futingkiller is offline

Offline

Newbie Poster

Nov 4th, 2009

•

Originally Posted by dmmajorstudent

thanks alot. this is starting to help me. now without using inner html. how do i add in specific paragraphs of information to these assigned links. like lets take famous cars for example.. and i write all this information about it. in javascript without using innerhtml how do i change the content and place it into the content div every time i click on one of those links?

there is nothing wrong with using innerHTML (btw it's case sensitive).
you can make a function that receives the #number of the link he clicked and check which one was clicked and put the text in the div according to the link that was clicked...
from what i know that is the only way to change what the div contains.... you can put any HTML code inside that div, and the browser will interpret it. for example:
document.getElementById('content').innerHTML="<table><tr><td> first tab </td></tr></table>"
if you are happy with my help mark this treath as solved