Object has no properties error

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
determinedmoth
Forum Commoner
Posts: 33
Joined: Wed Jul 07, 2004 9:13 am

Object has no properties error

Post by determinedmoth »

Hi
This has been driving me crazy - I'm not a JS expert, but I've given this days, it works - but it's generating errors.

It's a simple show/hide function that I'm trying to execute in a loop.

One item of 6 gets revealed, and the others get hidden.

How do I get rid of that one error on the "else" statement?

Code: Select all

function OrderDuration(id) {
var dispItem = document.getElementById(id).value
var myTypes = new Array(6)
myTypes[0] = 'CD01'
myTypes[1] = 'CD02'
myTypes[2] = 'CD03'
myTypes[3] = 'CD04'
myTypes[4] = 'CD05'
myTypes[5] = 'CD10'

for (i=0;i<=6; i++ ) 
{

var changeThis = document.getElementById(myTypes[i])
		
		if(dispItem == myTypes[i])
		{
			changeThis.style.display = ""
		}
		else
		{
		changeThis.style.display = "none" // error here: changeThis has no properties
		}

}


}
and the HTML;

Code: Select all

<body>
<select name="quantity" id="quantity" onchange="OrderDuration('quantity');">
  <option selected="selected" value="" >Select quantity</option>
  <option value="CD01" >Just the 1  </option>

  <option value="CD02" >+ 1 </option>
  <option value="CD03" >+ 2 </option>
  <option value="CD04" >+ 3 </option>
  <option value="CD05" >+ 4 </option>
  <option value="CD10" >+ 10 </option>

</select>
<select name="duration[]" id="CD01" style="display:none" >
  <option selected="selected" value="" >Select duration - CD01</option>
  <option value="3" >3 Months (	&pound;36 - Save &pound;0)</option>
  <option value="6" >6 Months (	&pound;68.4 - Save &pound;3.6)</option>
  <option value="12" >12 Months (	&pound;129.6 - Save &pound;14.4)</option>

</select>
<select name="duration[]" id="CD02" style="display:none" >
  <option selected="selected" value="" >Select duration - CD02</option>
  <option value="3" >3 Months (	&pound;72 - Save &pound;0)</option>
  <option value="6" >6 Months (	&pound;136.8 - Save &pound;7.2)</option>
  <option value="12" >12 Months (	&pound;259.2 - Save &pound;28.8)</option>

</select>
<select name="duration[]" id="CD03" style="display:none" >
  <option selected="selected" value="" >Select duration - CD03</option>
  <option value="3" >3 Months (	&pound;108 - Save &pound;0)</option>
  <option value="6" >6 Months (	&pound;205.2 - Save &pound;10.8)</option>
  <option value="12" >12 Months (	&pound;388.8 - Save &pound;43.2)</option>

</select>
<select name="duration[]" id="CD04" style="display:none" >
  <option selected="selected" value="" >Select duration - CD04</option>
  <option value="3" >3 Months (	&pound;144 - Save &pound;0)</option>
  <option value="6" >6 Months (	&pound;273.6 - Save &pound;14.4)</option>
  <option value="12" >12 Months (	&pound;518.4 - Save &pound;57.6)</option>

</select>
<select name="duration[]" id="CD05" style="display:none" >
  <option selected="selected" value="" >Select duration - CD05</option>
  <option value="3" >3 Months (	&pound;180 - Save &pound;0)</option>
  <option value="6" >6 Months (	&pound;342 - Save &pound;18)</option>
  <option value="12" >12 Months (	&pound;648 - Save &pound;72)</option>

</select>
<select name="duration[]" id="CD10" style="display:none" >
  <option selected="selected" value="" >Select duration - CD10</option>
  <option value="3" >3 Months (	&pound;360 - Save &pound;0)</option>
  <option value="6" >6 Months (	&pound;684 - Save &pound;36)</option>
  <option value="12" >12 Months (	&pound;1296 - Save &pound;144)</option>

</select>
</body>
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

don't declare your variable with 'var' within your loop.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

Burrito wrote:don't declare your variable with 'var' within your loop.
why?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

Weirdan wrote:
Burrito wrote:don't declare your variable with 'var' within your loop.
why?
cause that's the best I could guess. Everything he has looks to be ok to me. I didn't test it, but given what he's written, I'd think that when someone selects something from the first select box (quantity), it would show the next select according to the value. I'll give it a test go in a second and see if it works.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

the cause of error is here:

Code: Select all

i<=6
It means the last iteration of the loop is performed with i=6 and there is no such element in myTypes array. Changing the loop condition to strict 'less than' should help you.

BTW, you should be declaring your iteration variables as var (in javascript it means the variable is local to the function it is declared in). Otherwise you're using global variable i, which could lead to some interesting but frustrating effects and cost you a lot of debugging time and efforts.
determinedmoth
Forum Commoner
Posts: 33
Joined: Wed Jul 07, 2004 9:13 am

Post by determinedmoth »

Weirdan - you got it ;)

I now have this;

Code: Select all

function OrderDuration(id) {
var dispItem = document.getElementById(id).value
var myTypes = new Array(5)
myTypes[0] = 'CD01'
myTypes[1] = 'CD02'
myTypes[2] = 'CD03'
myTypes[3] = 'CD04'
myTypes[4] = 'CD05'
myTypes[5] = 'CD10'

for (i=0;i<=5; i++ )
{

var changeThis = document.getElementById(myTypes[i])
               
                if(dispItem == myTypes[i])
                {
                        changeThis.style.display = ""
                }
                else
                {
                changeThis.style.display = "none" // error here: changeThis has no properties
                }

}


} 
Seems to work fine now - thanks all.

Of course this was the FIRST hurdle in a long form, so you might see me again!
Post Reply