JavaScript - Onclick Changing Inner

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

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

Is there a way to do it?

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!

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.

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

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.