receiving parameters from url 1

machine08 · Feb 13, 2008

Hi all,

Simple question but my lack of JS experience is slowing me a bit. I would like to pass an element ID via url. Not sure how this is done but what I'm concerned is how to receive parameters via url.

Suppose the url I have is:

http://www.pagename.aspx?id=variable1

I understand that in the page receiving the variable I can read the url string by:

Code:

var receivedID = window.location.href;
alert (receivedID);

Through string manipulation I get the parameter I need. Here's the code:

Code:

var URLLength= window.location.href.length;
var URLString = window.location.href;
var startingPos = URLString.lastIndexOf("id");
var idName = URLString.substring(startingPos+3,URLLength);
alert(idName);

Now I would like to change the background color of the element identified:

Code:

document.getElementById(idName).style.backgroundColor = "yellow";

Unfortunately the color is not changing. Could someone explain why I'm not able to access the element?

Thank you very much!

dwarfthrower · Feb 13, 2008

Are you able to access the element? Is there an element with the ID you are passing? Who knows... if you posted your actual code you'd stand a far greater chance of getting a proper answer.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

machine08 · Feb 14, 2008

Hi dwarfthrower,

I believe there's an element with the ID I'm passing. I'm attaching the file. All I would like to test is when the page gets loaded I would like element with id="gcr" to change its background color to yellow. But when I write the following line:

Code:

document.getElementById("gcr").style.backgroundColor = "yellow";

The page gets an error.

machine08 · Feb 14, 2008

Hi again, I uploaded the file to box.net. Not sure how to share it though? Do you know?

Thanks!

machine08 · Feb 14, 2008

Trying the url path for the file at box.net

machine08 · Feb 14, 2008

OK, here's the correct file... Sorry I'm new!

Like I mentioned before, I'm hard coding the name of the element and just trying to change the background color of it's element (gcr) when the file loads up. Attaching the file.

Thank you!

machine08 · Feb 14, 2008

More info..

The error I'm getting is a "Object Required" error.

I made the TD I want to change colors the id="gcr". Is this not the correct way of doing it?

Thank you!

machine08 · Feb 14, 2008

Apparently id="gcr" is not being recognized. I just tried the following:

Code:

var x=document.getElementsByName("gcr");
  alert(x.length);

and got 0.

My next question would be, How do I give the TD element I want to change it's background color the id="gcr"?

Thank you!

tsuji · Feb 14, 2008

You're making non-sensical statements...
[1] With getElementsByTagName("grc") you are checking the structures of tag named grc:
[tt] <grc>bla bla</grc>[/tt]
So definitely you are not doing that.
[2] With getElementById("grc") you are checking any tag of id grc:
[tt] <td id="grc">bla bla</td>[/tt]
Is it what you've done?
[3] If the answer to [2] is positive, there are only a couple of possible outcomes.
[3.1] Either you have multiple nodes with id="grc", in that case, the first one get the change (no error though even multiple id of the same name in some case can cause more material error/problem.)
[3.2] You get a display:none (or hidden) node with that id="grc", then you don't observe any change which does take place.

tsuji · Feb 14, 2008

amendment
[1'] You're actually using getElementsByName("grc") - sorry -, you are checking:
[tt] <td name="grc">bla bla</td>[/tt]
but that is again different if you set id="grc". Analysis goes the same way.

machine08 · Feb 14, 2008

tsuji,

Thank you for your feedback! Greatly appreciated.

Currently there's only 1 TD with the id mentioned above:

Code:

<td id="gcr" >
GCR
</td>

Shouldn't this line of code:

Code:

document.getElementById("gcr").style.backgroundColor = "yellow";

change the background of that TD to yellow?

tsuji · Feb 14, 2008

It should.

machine08 · Feb 14, 2008

That is what I understood. For some reason is not working. I wonder what is causing this?

kaht · Feb 14, 2008

Well... this error:

The error I'm getting is a "Object Required" error.

basically means that the element does not exist.

Do this on your page:

Code:

document.getElementById("lkjsljhalshkalsdkj").value = "test";

and you'll get the same exact error. I'd start looking into why the element does not exist - that is your best lead given the information you've provided.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

machine08 · Feb 14, 2008

Thank you all for your help thus far...

I re-created my issue with a plain table. Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xmlns:m="[URL unfurl="true"]http://schemas.microsoft.com/office/2004/12/omml"[/URL] xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<script type="text/javascript">
 document.getElementById("gcr").style.backgroundColor = "yellow";
</script>

</head>

<body>
	<table  width="1087" style="width: 815pt">
		<tr style="height: 15.0pt">
			<td  id="gcr" style="width: 19pt; background-color: #17375D; color:white">1</td>
		</tr>
	</table>

</body>
</html>

Is there anything that looks wrong? Thank you!

kaht · Feb 14, 2008

Yup, the javascript function is firing before the rest of the page is even created. You shouldn't run any javascript commands that reference HTML elements until after the page has completely loaded. Make the following change:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xmlns:m="[URL unfurl="true"]http://schemas.microsoft.com/office/2004/12/omml"[/URL] xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<script type="text/javascript">
[!]window.onload = function () {[/!]
   document.getElementById("gcr").style.backgroundColor = "yellow";
[!]};[/!]
</script>

</head>

<body>
    <table  width="1087" style="width: 815pt">
        <tr style="height: 15.0pt">
            <td  id="gcr" style="width: 19pt; background-color: #17375D; color:white">1</td>
        </tr>
    </table>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

machine08 · Feb 14, 2008

Thank you Thank you Thank you! Obciously something very basic! So I take it you need this function to load the document!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

receiving parameters from url 1

machine08

Technical User

dwarfthrower

Programmer

machine08

Technical User

machine08

Technical User

machine08

Technical User

machine08

Technical User

machine08

Technical User

machine08

Technical User

tsuji

Technical User

tsuji

Technical User

machine08

Technical User

tsuji

Technical User

machine08

Technical User

kaht

Programmer

machine08

Technical User

kaht

Programmer

machine08

Technical User

Similar threads

Part and Inventory Search

Sponsor