JavaScript - Changing Content Of Each Of 4 Divs With Javascript - Onclick??

If you wanted to change an ids onclick would int you just do this

document.getElementById("").onclick = "";

Is there a way to do it?

Hey everyone - got a Q...

I'm having a tabbed panel where the 1st div is originally shown with display: block and the other 3 are display:none to hide, obviously. I want each div to have their own link where if you click the link for div 2 it hides the previous and shows that one etc. Here's what I originally have:

Code:

<script type="text/javascript">
function tab2() {
	document.getElementById('tab-content-2').style.display="block";
	document.getElementById('tab-content-1').style.display="none";
}
</script>

<div id="tab-top">
	<div class="tab-top-l">
	</div>

	<div class="tab-top-main">
		<ul>
			<a href="#" title="Lorem et"><li>Lorem et</li></a>
			<a href="#" title="Lorem et" onclick="tab2()"><li class="not-first">Lorem et</li></a>
			<a href="#" title="Lorem et"><li class="not-first">Lorem et</li></a>
			<a href="#" title="Lorem et"><li class="not-first">Lorem et</li></a>
		</ul>
	</div>
	<div class="tab-top-r">
	</div>
</div>

<div id="tab-content-1" style="display: block;">
	Content 1
</div>
<div id="tab-content-2" style="display: none;">
	Content 2
</div>
<div id="tab-content-3" style="display: none;">
	Content 3
</div>
<div id="tab-content-4" style="display: none;">
	Content 4
</div>

That successfully hides tab 1 and shows tab 2 but I don't know how to do it properly so it hides the previously shown one. One tab should always be shown.

Image attached to show what I mean.

Hello,

I have a div called pageWrap to wrap my page with the css as
Code:

margin-top:-46px;

I would like to use Javascript onClick on another div.
This Div is called loginButton, the onclick should change the the css of pageWrap to 0px and onclick again should change it back.

If someone could help me with this code, it would be greatly appreciated

Thanks in advance!

I'm doing a school project and I am using JPlayer as a media player. The site is essentially a music jukebox with a search. I have the playlist set up in the jukebox with 5 songs from the start, but I need to make it so that when you do a search and click the plus sign button next to a song, it will change one of the songs in the playlist to that song.

I have the search and everything working but when I click the button it does not actually change the variable in the javascript. Any help or insight to this would be much appreciated.

Below is the javascript (with some PHP, but that shouldn't effect what I need).

Thanks in advance!!

Code:

<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
		<!-- CSS files required for JPlayer -->
		<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
		<link rel="stylesheet" href="skin/jplayeraudio.css" type="text/css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
		<script type="text/javascript">
		<!--
		var nextSet = 1;
		
		<?php
		$songsInDB = 70;
		
		$rand1 = rand(1, $songsInDB);
		$rand2 = rand(1, $songsInDB);
		while($rand2 == $rand1) {
			$rand2 = rand(1, $songsInDB);
		}
		$rand3 = rand(1, $songsInDB);
		while($rand3 == $rand2 || $rand3 == $rand1) {
			$rand3 = rand(1, $songsInDB);
		}
		$rand4 = rand(1, $songsInDB);
		while($rand4 == $rand3 || $rand4 == $rand2 || $rand4 == $rand1) {
			$rand4 = rand(1, $songsInDB);
		}
		$rand5 = rand(1, $songsInDB);
		while($rand5 == $rand4 || $rand5 == $rand3 || $rand5 == $rand2 || $rand5 == $rand1) {
			$rand5 = rand(1, $songsInDB);
		}
		?>
		
		var var1 = <?php echo $rand1; ?>;
		var var1artist = '<?php echo $database->getSongArtist($rand1); ?>';
		var var1title = '<?php echo $database->getSongTitle($rand1); ?>';
		var var2 = <?php echo $rand2; ?>;
		var var2artist = '<?php echo $database->getSongArtist($rand2); ?>';
		var var2title = '<?php echo $database->getSongTitle($rand2); ?>';
		var var3 = <?php echo $rand3; ?>;
		var var3artist = '<?php echo $database->getSongArtist($rand3); ?>';
		var var3title = '<?php echo $database->getSongTitle($rand3); ?>';
		var var4 = <?php echo $rand4; ?>;
		var var4artist = '<?php echo $database->getSongArtist($rand4); ?>';
		var var4title = '<?php echo $database->getSongTitle($rand4); ?>';
		var var5 = <?php echo $rand5; ?>;
		var var5artist = '<?php echo $database->getSongArtist($rand5); ?>';
		var var5title = '<?php echo $database->getSongTitle($rand5); ?>';
		
		
		var playItem = 0;
		
		$(document).ready(function(){

			var myPlayList = [
				{name:var1artist+" - "+var1title, mp3:"music/"+var1+".mp3"},
				{name:var2artist+" - "+var2title, mp3:"music/"+var2+".mp3"},
				{name:var3artist+" - "+var3title, mp3:"music/"+var3+".mp3"},
				{name:var4artist+" - "+var4title, mp3:"music/"+var4+".mp3"},
				{name:var5artist+" - "+var5title, mp3:"music/"+var5+".mp3"},
			];

			// Local copy of jQuery selectors, for performance.
			var jpPlayTime = $("#jplayer_play_time");
			var jpTotalTime = $("#jplayer_total_time");

			$("#jquery_jplayer").jPlayer({
				ready: function() {
					displayPlayList();
					playListInit(false); // Parameter is a boolean for autoplay.
				},
				ended: function() {
					playListNext();
				},
				swfPath:"/js",
				nativeSupport: true,
				supplied: "mp3"
			});

			$("#jplayer_previous").click( function() {
				playListPrev();
				$(this).blur();
				return false;
			});

			$("#jplayer_next").click( function() {
				playListNext();
				$(this).blur();
				return false;
			});

			function displayPlayList() {
				$("#jplayer_playlist ul").empty();
				for (i=0; i < myPlayList.length; i++) {
					var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
					listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
					$("#jplayer_playlist ul").append(listItem);
					$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
						var index = $(this).data("index");
						if (playItem != index) {
							playListChange( index );
						} else {
							$("#jquery_jplayer").jPlayer("play");
						}
						$(this).blur();
						return false;
					});
				}
			}

			function playListInit(autoplay) {
				if(autoplay) {
					playListChange( playItem );
				} else {
					playListConfig( playItem );
				}
			}

			function playListConfig( index ) {
				$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
				$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
				playItem = index;
				$("#jquery_jplayer").jPlayer("setMedia", myPlayList[playItem]);
			}

			function playListChange( index ) {
				playListConfig( index );
				$("#jquery_jplayer").jPlayer("play");
			}

			function playListNext() {
				var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
				playListChange( index );
			}

			function playListPrev() {
				var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
				playListChange( index );
			}
		});
		
		function loadSong(songID, artist, title) {
			if(nextSet == 1){
				var1 = songID;
				var1artist = artist;
				var1title = title;
				nextSet++;
			}

			else if(nextSet == 2){
				var2 = songID;
				var2artist = artist;
				var2title = title;
				nextSet++;
			}

			else if(nextSet == 3){
				var3 = songID;
				var3artist = artist;
				var3title = title;
				nextSet++;
			}

			else if(nextSet == 4){
				var4 = songID;
				var4artist = artist;
				var4title = title;
				nextSet++;
			}

			else if(nextSet == 5){
				var5 = songID;
				var5artist = artist;
				var5title = title;
				nextSet++;
			}

			if(nextSet > 5){
				nextSet = 1;
			}
			
			alert("Song has been queued! "+nextSet)
		}
		
		
		var i = 1;
		$(document).ready(function(){
			$(".search").click(function(){
				$.post("livequery.php", { keywords: $(".keywords").val(), mode: $(".mode").val() }, function(data){
					$("table#content").empty()
					$.each(data, function(){
						var _class = "search_content1";
						if(i % 2 == 0) {
							_class = "search_content2";
						}
						$("table#content").append("<tr class='"+_class+"'><td class='trunc_table' width='4%'><input type='button' value='+' onClick=\"loadSong('"+this.id+"', '"+this.artist+"', '"+this.title+"')\" /></td><td class='trunc_table' width='27%'>" + this.title + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='22%'>" + this.artist + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='16%'>" + this.album + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='14%'>" + this.genre + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='13%'>" + this.mood + "</td></tr>");
						i++;
					});
				}, "json");
			});
		});
		-->
		</script>

Also, the code for the playlist is in the myPlayList array, which I'm referencing the title, artist, and filename with the javascript values. I'm trying to change them in the function loadSong(songID, artist, title). I get the alert popup that I have in there, but no values change as far as the songs.

Hi all,

I hope that someone can help me with this strange problem I have here.

I have some script which changes a button and changes the onclick event.

The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter.

Here's my Code.
Code:

	var AllocPeople = window.opener.document.getElementById('AllocPeople');
	
	if(AllocPeople.value.length > 0)
	{
		var people = AllocPeople.value.split(",");
		var Controls = new Array();
		for(var P in people)
		{
			var id = people[P];
			Controls[P] = document.getElementById('bt_AP_'+id);
			Controls[P].innerHTML = "Deallocate";
			Controls[P].onclick = function() {Remove_Player(id)};
		}
		
	}

Thanking you all in advance.

Hi

I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page.

if(document.images){
var image_array = new Array();
// path to the directory with images
var path = './images/food-drink/food/';
// enumeration of the "active" images
image_array[0] = path + "starters_r.png";
image_array[1] = path + "mains_r.png";
image_array[2] = path + "desserts_r.png";
image_array[3] = path + "childrens_r.png";
image_array[4] = path + "sandwiches_r.png";
image_array[5] = path + "meal_r.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++){
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}

function rollover(name, filename){
var fullpath = './images/food-drink/food/' + filename;
document.images[name].src = fullpath;
}

I am trying to change the image with another one, which will change back when a different image is clicked.

The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event.

function swichtabs(wert) {
if (wert=='1'){ /*menu starters tab*/
document.getElementById('tabStarters').className='tab1 tabactive';
document.getElementById('tabMains').className='tab2';
document.getElementById('tabDesserts').className='tab3';
document.getElementById('tabChildrens').className='tab4';
document.getElementById('tabSandwiches').className='tab5';
document.getElementById('tabMeals').className='tab6';
}else if (wert=='2'){
etc...

The html code for the image is:

<a href="#starters"
onmouseout="rollover('btnStarters','starters.png')"
onmouseover="rollover('btnStarters','starters_r.png')"
onClick="this.onMouseOver=null;this.onMouseOut=null;
blendon('starters');
blendoff('mains');etc...;
swichtabs('1');" onclick="return false;" title="Starters"
id="tabStarters">
<img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" />
</a>

I would be grateful if you could point me in the right direction.

Ok, 'nother head-banger for the hardcore!

I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens.

I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out.

Here's the code:

The snippet on the main page (index.html):

Code:

                <div id="linkListContact" class="LinkList">
				<img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img>
                    <span>
                    <ul>
                        <li>
                            <div><a id="contact">Contact Us</a>
                            </div>
                        </li>
                    </ul>
                    </span>
                </div>

... and the relevant Javascript:

Code:

function setIFrame(frameSource)
	{
		document.getElementById('mainWindow').src = frameSource;
	}

function setContactLink()
	{
		var contactURL = "http://katabasis.spreadshirt.com/shop/imprint"
		document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" );
	}

The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com.

Thanks.

I would like onclick to only work from div id="telli", but instead it works on all the divs.. I've tried a lot of different things, nothing has worked so maybe somebody can help me. I would like the div telli to open up a popup layer onclick. Please help me.. I am a newbie to Javascript

HTML sheet:
<body>

<div id="main">
<div id="header">
<div id="content">
<div id="sidebar">
<div id="telli</div>
<div id="footer">

</div>
</div>
</div>
</div>
</div>


</body>


CSS sheet:
html {
background: url(back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}

#main {
background-image:url(ground.png);
position:absolute;
margin-left:auto;
margin-right:auto;
width:1300px;
height:1200px;

}

#header {
background-image:url(header.png);
position:absolute;
width:1300px;
height:1200px;
}

#content {
background-image:url(content.png);
position:absolute;
width:1300px;
height:1200px;
}

#telli {
background-image:url(telli.png);
position:absolute;
width:1300px;
height:1200px;
}

#sidebar {
background-image:url(sidebar.png);
position:absolute;
width:1300px;
height:1200px;
}

#footer {
background-image:url(footer.png);
position:absolute;
width:1300px;
height:1200px;
}

Hi,

Need some help please. I have the following function:

Code:

<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
 
var questionid = document.question.questionid.value;
 
xmlhttp.open("GET","result.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

I then have the following onClick:

Code:

<input type="radio" name="vote" value="1" onClick="getVote(this.value);" />
<input type="radio" name="vote" value="2" onClick="getVote(this.value);" />

Currently, all is good and works perfectly, the div 'ajax' refreshes ajax style with 'result.php' and I can take the value. But what I now need to do is refresh two divs. I have tried everything from putting two onClicks on the radio button, within the 'getVote' function calling in the second function and many more alternatives.

The second function is pretty much the same, just a different div ID:

Code:

<script type="text/javascript">
function getTotal(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("total").innerHTML=xmlhttp.responseText;
}
}
   
xmlhttp.open("GET","total.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

The problem I have, I think, is that both functions need to use 'xmlhttp.open', and it seems once one has ran, the functions end.

Any ideas gratefully received.

Thanks.

The very basic onclick code I threw together:
Code:

function descw()
{
	document.getElementById("desc").style.display="block";

}

function descc()

{
	document.getElementById("desc").style.display="none";
}

The div that needs a description...
Code:

<div class="select"><img src="image.jpg" onclick="descw()"></div>

..and the actual description div.
Code:

<div id="desc">
<img  src="close.jpg" onclick="descc">
<p>Description</p>
</div>

This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error.

So I'm trying to get one particular number from a game's grand exchange database.
Say I wanted to know the 'Market price' of this item
and the item results would change on click of a drop down box.
I don't know how I'd go about getting that one section of the entire page though.
Any help is appreciated.

Code:

<html>
<head>
<title></title>

function doit()
{
	var potion = calculate.potion.options[calculate.potion.selectedIndex].text;
	
	if (potion=="Sara brew")
	{
		var potion = "Saradomin_brew_(3)";
	}
	if (potion=="Zammy brew")
	{
		var potion = "Zamorak_brew_(3)";
	}
calculate.results.value=potion;
}

</head>
<body>
Item: <select name="potion" onChange="doit()" />
        <option selected>--Potion--</option>
        <option>Sara brew</option>
        <option>Zammy brew</option>

<br />
<input type="text" name="results" />
</body>
</html>

I'm trying to make a basic rss reader with a google reader-esque functionality of clicking on article names and being able to expand/collapse that article. I'm working on the expand part and am going crazy. I am having no trouble getting content and displaying it without the onclick function but when I try to integrate onclick I can just get the titles.


here's the snippet. any help?




Code:

<!-- HTML -->
<body>
<div id="feeddiv"></div>



<script type="text/javascript">




//	feed stuff using Google Feed API



    function feedLoaded(result)
	{
      if (!result.error)
	   {
        // Grab the container we will put the results into
        var container = document.getElementById('feeddiv');
        container.innerHTML = '';
        // Loop through the feeds, putting the titles onto the page.
        for (var i = 0; i < result.feed.entries.length; i++)
		 {
		  var entry = result.feed.entries[i];
		  var content = entry.content;
		  var title = entry.title;
		  var url = entry.link;
		  var div = document.createElement('div'); //parentDiv for articles
		 
		  var articleTitle = document.createElement('div');
		  articleTitle.setAttribute('name', i); //set articleTitle name to article's place in array
		  articleTitle.setAttribute('style', 'font-weight:bold;font-size:15px;');  
		  articleTitle.innerText = title;
		  articleTitle.onclick  = function() {populate(content, title, url, i);};
		 
		  div.appendChild(articleTitle); //adds title to div

		  container.appendChild(div); //adds div to the container
        }
      }
    }
	
    
    function populate(content,title, url, i)
    {
    
    var article = document.getElementByName(i); //gets articleTitle
   
     	//clickable title
	  var a = document.createElement('a'); //creating title link
	  var href = document.createElement('href'); 
	  a.setAttribute('href', url); //putting actual url into html
	  a.setAttribute('style', 'font-size:25px;');
	  a.innerText = title;//still puts into html

	//Text
    var snippet = document.createElement('p'); //creates <p> to throw articles in
    snippet.innerHTML = content; //renders the article
    
    article.appendChild(a);
    article.appendChild(snippet);
    
    }
</script>
</body>

hey there. im currently working on a page that has three links in the left element that all bring up different content in the right. its a two column page.
ive looked into achieving this and while innerHTML is mentioned extensively, its only cited for simple changes (a name, a date, etc) and not necessarily for more involved ones.

ive actually tried just plugging in the markup in its entirety in the innerHTML property, but the script seems to quit working after the markup becomes too comprehensive.

for instance.

Code:

function ourReach() {
     document.getElementById('rightpane').innerHTML = '<img src="ourreach.gif"'>
}

while

Code:

function ourReach() { 
 document.getElementById('rightpane').innerHTML = '
<div id="rightpane">
<ul style="position:absolute; top:-15px; left:-30px">
 <li class="header" style="margin-top:-10px; margin-bottom:20px">AS A COMPANY</li>
              	<li class="header" style="margin-bottom:5px">What we do</li>
               	<li style="width:500px" class="font1">View Scan Labs is a company founded under the singular belief that the quality of its product
               										 not come at the cost of its integrity.
                </li>
               	<li class="header" style="margin-bottom:5px; margin-top:15px">Who we are</li>
                <li class="font1" style="width:400px; color:grey">
                Content
	        </li>
                <li style="margin-left:0px; margin-top:30px;color:grey;" class="header" onclick="environment()"><a href="#">Environmental Goals</a></li>
                <li style="margin-left:0px;margin-top:2px; color:grey " class="header"><a href="#">Our Reach</a></li>
             </ul>
             
            <div style="position:absolute; top:340px; left:30px; width:600px;">
              <p class="header" style="position:absolute; left:-20px; top:-75px" >Mailing Address:</span></p>
              	<ul style="margin-left:-59px;margin-top:-40px">
                	<li class="font1">Bleh Bleh Bleh</li>
                	<li class="font1">309 Bleecker St.</li>
                    <li class="font1">Brooklyn, New York 11231</li>
                    <li class="font1">USA, +1 1339 6525</li>
                </ul>    </div>'
}

does not.

is there a better way to handle this than the innerHTML property. can i put the markup in a separate script and just have that script called up in innerHTML, if anything just so it looks more succinct. thanks.

I'm trying to get this to work. I'm making an multiple uploadscript which shows an loader animation while uploading and after upload the image which has been uploaded.

When a file is submitted an <li></li> is added with the loadergif. After uploading I want to change the animation gif with the uploaded image.

Here is what I got.
Code:

$('<li></li>').appendTo('#loadstatus').html('<img src="waiting.gif" />').addClass('success');

onComplete: function(file, response){
	//Add the file to a list
	if(response==="success"){
		$('<li></li>').appendTo('#loadstatus').html('<img src="./uploads/'+file+'"/><br />').addClass('success');
	} else{
		$('<li></li>').appendTo('#loadstatus').text(file).addClass('error');
	}
}

This just adds another <li></li> instead of changing the content of the current <li></li>.

What do I do wrong?

Please help. Thansk in advance :-)

I'd like to place an AJAX call to load another SELECT menu in my form, and I'm having trouble finding a tutorial.
Can someone point me to a good tute, or provide some guidance/examples here?

For your Copying/Pasting pleasure , here's an example button for which I'd include the onclick():
Code:

<button type="button" >Add</button>

And here's an example SELECT menu:
Code:

<select id="idNumber" name="weekday_1['workPeriod_new'][] >
	<option value="1" >one</option>
	<option value="2" >2</option>
</select>

Thanks-a-bunch,
~ Mo

NOTE: Overall, I'm pretty green in JS.