Jump to content

Referring to an ID outside of its function?

saitarion

By saitarion
in JavaScript

Recommended Posts

saitarion Newbie

saitarion

Posted
Posted

How do I alter the code below so that the if(id == "no1") is referring to the var of the id in function Content(id)?The reason I don't run the code below within the function is because I want it to be automatically triggered. Unless I am doing it wrong...

function for id to refer to:[code]function Content(id) {	if (document.getElementById) {		var info = document.getElementById(id);		}	}}if (id == "no1") {	window.onload=function() {Content('no2');}}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

It's not very clear what you're trying to ask. What do you want to happen and when?id here

function Content(id) {	if (document.getElementById) {		var info = document.getElementById(id);		}	}}

and id here

if (id == "no1") {	window.onload=function() {Content('no2');}}

do not share the same scope. There is no context for id in the above code block, and id would actually undefined. Also, it's just calling Content anyway, so why would you want that to run within the Content function? Are you trying to make a recursive function?

Link to comment
Share on other sites
saitarion Newbie

saitarion

Posted
  • Author
Posted

When the page loads up I want it to automatically move from an 'undefined' value to a value such as 'no1'.I have seen the code (below) being used. However I only want it to be carried out if the var is 'undefined'. Hence why I had the if statement around it.Again, it may not be possible.The reason I want to use it outside of the function is because whenever I force the function to load such as <body onload="function('no1')"> It forces the function to toggle between the value 'no1' and null or undefined.Using the "window.onload=function() {Content('no1');}" seems to switch it to that value and not toggle between the two. However once it has changed from "undefined" I do not want to repeat the action.

function Content(id) {	if (document.getElementById) {		var info = document.getElementById(id);		}	}} /* like this but with only when the condition that "function Content(undefined)" is true */	window.onload=function() {Content('no1');}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

just check the value of id each time it's submitted to the function.

function Content(id){  if(id === undefined || id === ''){	id = 'no1';  };  if(document.getElementById){	var info = document.getElementById(id);  };};

I'm guessing the reason it was happening incorrectly before onload was because you were probably doing this

window.onload = Content('no1');

This was causing Content be executed as it's read by the browser, because of the ().By assigning an anonymous function to the window.onload event handler as you are doing now, then the function will instead run when the event actually occurs.

Link to comment
Share on other sites
saitarion Newbie

saitarion

Posted
  • Author
Posted

I have been unsuccessful with all the responses I have had. Below is all of the code for the page.All I want the page to do is load with a menu. When the page loads up the menu ID is "function ContentMenu(undefined)". Since the menu is ContentMenu('sub1') nothing appears.All I need is a piece of code that forces undefined to sub1 only when the page is loaded and the ID is undefined.It needs to be setup so that when the page is reloaded / refreshed, the menu doesn't disappear and reappear with every load.Hopefully what I have said makes sense.I have been pulling my hair over this code for countless hours and am on the brink on giving up!Again, any and all help is greatly appreciated!

<html><head><style type="text/css">	body {font-family: "Helvetica";	width: 630px; margin: 0 auto 0 auto;}	h3, h3 a {color: #a4123f; font-size: 23px; margin: 0; padding: 0 4px; font-weight: normal; color: #000; text-decoration: none;}	.menu-select h3 a, .menu-select h3 a:hover {color: #E5E2D9; cursor: default; text-decoration: line-through;}	h4, h4 a {font-size: 16px; margin: 0 1px; font-weight: normal;}	/* --- mini menu --- */	.mini-menu {margin: 26px 0 0 0; padding: 4px 0 0 0 !important; height: 22px;}	.mini-menu-unit {cursor: pointer; float: left; padding: 0 4px; border-right: 2px solid #000;}	/* --- menu --- */	.menu {margin: 4px 0 4px 0;}	.menu-hide .menu {width: 628px;}	.menu-unit {position: relative; float: left; margin: 4px 0; padding: 0 4px; border-right: 2px solid #000;}	.last {border-right: none;}	.left {float: left; clear: left;}	.right {float: right; clear: right;}	.content {border: 1px solid #9F9D96;}	.menu .current a {color: #000; text-shadow: #000 0 0 4px;}</style><script type="text/javascript">	var persistmenu="yes" 	var persisttype="sitewide"	if (document.getElementById) {		document.write('<style type="text/css">\n')		document.write('.menu-hide{display: none;}\n')		document.write('</style>\n')	}	function ContentMenu(id) {		if (document.getElementById) {			var element = document.getElementById(id);			var hidden = document.getElementById("menu-box").getElementsByTagName("div");			if (element.style.display != "block") {				for (var i=0; i<hidden.length; i++) {					if (hidden[i].className=="menu-hide") hidden[i].style.display = "none";				}				element.style.display = "block";			} else {			element.style.display = "none";			}		}	}	function get_cookie(Name) { 		var search = Name + "="		var returnvalue = "";		if (document.cookie.length > 0) {			offset = document.cookie.indexOf(search)			if (offset != -1) { 				offset += search.length				end = document.cookie.indexOf(";", offset);				if (end == -1) end = document.cookie.length;				returnvalue=unescape(document.cookie.substring(offset, end))			}		}		return returnvalue;	}	function onloadfunction() {		if (persistmenu=="yes"){			var cookiename=(persisttype=="sitewide")? "ContentMenu" : window.location.pathname			var cookievalue=get_cookie(cookiename)			if (cookievalue!="")			document.getElementById(cookievalue).style.display="block"		}	}	function savemenustate() {		var inc=1, blockid=""		while (document.getElementById("sub"+inc)) {			if (document.getElementById("sub"+inc).style.display=="block") {				blockid="sub"+inc				break			}			inc++		}		var cookiename=(persisttype=="sitewide")? "ContentMenu" : window.location.pathname		var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid		document.cookie=cookiename+"="+cookievalue	}	if (window.addEventListener)	window.addEventListener("load", onloadfunction, false)	else if (window.attachEvent)	window.attachEvent("onload", onloadfunction)	else if (document.getElementById)	window.onload=onloadfunction	if (persistmenu=="yes" && document.getElementById)	window.onunload=savemenustate/*	window.onload=function() {ContentMenu('sub1');} */</script></head><body><div id="menu-box">	<!-- sub1 - all -->	<div class="menu-hide" id="sub1">		<div class="mini-menu content right">			<div class="mini-menu-unit"<h4><span style="color: #000; text-shadow: #000 0 0 4px;">Selection - All</span></h4>			</div>			<div class="mini-menu-unit last" onclick="ContentMenu('sub2')"><h4>Selection - Some</h4>			</div>		</div>		<div class="menu left content">			<div class="menu-unit"><h3><a href="a.html">Menu A</a></h3> 			</div>			<div class="menu-unit last"><h3><a href="b.html">Menu B</a></h3> 			</div>		</div>	</div>	<!-- sub2 - Sub Menu A -->	<div class="menu-hide" id="sub2">		<div class="mini-menu content right">			<div class="mini-menu-unit" onclick="ContentMenu('sub1')"><h4>Selection - All</h4>			</div>			<div class="mini-menu-unit last"><h4><span style="color: #000; text-shadow: #000 0 0 4px;">Selection - Some</span></h4>			</div>		</div>		<div class="menu left content">			<div class="menu-unit"><h3><a href="a.html">Menu A</a></h3>			</div>			<div class="menu-unit last menu-select"><h3><a href="b.html">Menu B</a></h3>			</div>		</div>	</div></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...