0

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.

<!--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>

Edited by Ezzaral: Added [code] [/code] tags. Please use them to format any code that you post.

3
Contributors
7
Replies
8
Views
7 Years
Discussion Span
Last Post by futingkiller
0

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

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

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

you add an onclick event like this:

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

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

0

a good place to learn javascript is w3schools

I have no idea what this means

you add an onclick event like this:

<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?

0

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

function change_content()
{
document.getElementById('content').innerHTML='the new text';
}

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

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

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

0

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>

Edited by peter_budo: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

0

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>

<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>

and the function is:

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

0

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?

0

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 :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.