5 Replies - 746 Views - Last Post: 20 July 2010 - 04:57 PM

#1 mysticDragon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 13-November 06

Problem accessing a style of a element

Posted 19 July 2010 - 09:17 PM

I am trying to access the style attribute of a element in order to display a form however, I get this error: Uncaught TypeError: Cannot read property 'style' of undefined. The example below is a simplified example.

cookies.php
<?php
echo "<a href='test.php?flavor=oatmeal-raisin'>Bake Oatmeal Raisin Cookies</a>";

echo "<a href='test.php?flavor=butter'>Bake Butter Cookies</a>";

echo "<a href='test.php?flavor=chocolate'> Bake Chocolate Cookies </a>";
?>



test.php
<?php
$cookieType=$_GET['flavor'];

switch($cookieType){

	case "chocolate":
		echo "<script type='text/javascript'>";
		echo "document.chocolate.style.display='block'; ";
		echo "</script>";
	break;
	case "oatmeal-raisin":
		echo "<script type='text/javascript'>";
		echo "document.oatmealraisin.style.display='block'; ";
		echo "</script>";
	break;
	case "butter":
		echo "<script type='text/javascript'>";
		echo "document.butter.style.display='block'; ";
		echo "</script>";
	break;
}

?>

<div id="chocolate" style="display:none;">
	<form action="<?php echo $_SERVER['php_self']?>">
		<input type="hidden" name="type" value="chocolate"/>
		What is your name: <input type="text" name="your_name"/>
		How many chocolate chips on each cookie? <input type="text" name="chips"/>
		How many many cookies? <input type="text" name="cookies"/>
		<input type="submit" name="BAKE!"/>
		<input type="reset"/>
	</form>
</div>

<div id="oatmealraisin" style="display:none;">
	<input type="hidden" name="type" value="oatmealraisin"/>
	<form action="<?php echo $_SERVER['php_self']?>">
		What is your name: <input type="text" name="your_name"/>
		How many raisins on each cookie? <input type="text" name="raisins"/>
		How many many cookies? <input type="text" name="cookies"/>
		<input type="submit" name="BAKE!"/>
		<input type="reset"/>
	</form>
</div>

<div id="butter" style="display:none;">
	<form action="<?php echo $_SERVER['php_self']?>">
		<input type="hidden" name="type" value="butter"/>
		What is your name: <input type="text" name="your_name"/>
		How many many cookies? <input type="text" name="cookies"/>
		<input type="submit" name="BAKE!"/>
		<input type="reset"/>
	</form>
</div>

<?php

if(isset($_GET['BAKE!'])){
$type = $_GET['type'];

switch($type){
	case "chocolate":
		"Your cookies are done! ".$_GET['your_name']. " Enjoy your chocolate cookies";
	break;
	case "oatmealraisin":
		"Your cookies are done! ".$_GET['your_name']. " Enjoy your chocolate cookies";
	break;
	case "butter":
		"Your cookies are done! ".$_GET['your_name']. " Enjoy your chocolate cookies";
	break;
}	
}

?>



I have never had problems accessing the style attribute of a element before so I am not sure what is the problem. The switch statement does work because the javascript console shows the output of the right case. I need another pair of eyes. Any suggestions?

Is This A Good Question/Topic? 0
  • +

Replies To: Problem accessing a style of a element

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Problem accessing a style of a element

Posted 19 July 2010 - 09:32 PM

a ) you try to access an element before its created
b ) the element access is invalid (mind you have 3 different forms)

This post has been edited by Dormilich: 19 July 2010 - 09:33 PM

Was This Post Helpful? 0
  • +
  • -

#3 mysticDragon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 13-November 06

Re: Problem accessing a style of a element

Posted 19 July 2010 - 09:54 PM

But I am accessing the div id. The form is within the div. And I have tried putting the first php section after the html however, the result is the same.
Was This Post Helpful? 0
  • +
  • -

#4 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1633
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Problem accessing a style of a element

Posted 19 July 2010 - 10:48 PM

If I'm not mistaken you need to reference the form then the control name, so this code

<?php
$cookieType=$_GET['flavor'];

switch($cookieType){

	case "chocolate":
		echo "<script type='text/javascript'>";
		echo "document.chocolate.style.display='block'; ";
		echo "</script>";
	break;
	case "oatmeal-raisin":
		echo "<script type='text/javascript'>";
		echo "document.oatmealraisin.style.display='block'; ";
		echo "</script>";
	break;
	case "butter":
		echo "<script type='text/javascript'>";
		echo "document.butter.style.display='block'; ";
		echo "</script>";
	break;
}

?>



Should probably look like this
<?php
$cookieType=$_GET['flavor'];

switch($cookieType){

	case "chocolate":
		echo "<script type='text/javascript'>";
		echo "document.forms[0].elements["chocolate"].style.display='block'; ";
		echo "</script>";
	break;
	case "oatmeal-raisin":
		echo "<script type='text/javascript'>";
		echo "document.forms[1].elements["oatmealraisin"].style.display='block'; ";
		echo "</script>";
	break;
	case "butter":
		echo "<script type='text/javascript'>";
		echo "documentforms[2].elements["butter"].style.display='block'; ";
		echo "</script>";
	break;
}

?>


Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Problem accessing a style of a element

Posted 19 July 2010 - 10:53 PM

you cannot reference form element by values. it should look more like
<?php
$cookieType=$_GET['flavor'];
$script = 'document.forms[%d].elements["type"].style.display="block";';

echo "<script type='text/javascript'>";
switch($cookieType){

	case "chocolate":
		printf($script, 0);
	break;
	case "oatmeal-raisin":
		printf($script, 1);
	break;
	case "butter":
		printf($script, 2);
	break;
}
echo "</script>";
?>


This post has been edited by Dormilich: 19 July 2010 - 10:55 PM

Was This Post Helpful? 0
  • +
  • -

#6 mysticDragon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 13-November 06

Re: Problem accessing a style of a element

Posted 20 July 2010 - 04:57 PM

Okay, I got it to work. I changed the switch code to
switch($cookieType){

	case "chocolate":
		echo '<script type="text/javascript">';
		echo 'document.getElementById("chocolate").style.display="block"; ';
		echo '</script>';
	break;
	case "oatmealraisin":
		echo '<script type="text/javascript">';
		echo 'document.getElementById("oatmealraisin").style.display="block"; ';
		echo '</script>';
	break;
	case "butter":
		echo '<script type="text/javascript">';
		echo 'document.getElementById("butter").style.display="block"; ';
		echo '</script>';
	break;
}



and I took Dormilich initial suggestion about moving the code after the html code so the html can be created first before accessing it. So I pushed the switch statement after the html. Thanks a lot.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1