Page 1 of 1

Object has no properties error

Posted: Thu Apr 26, 2007 12:47 pm
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>

Posted: Thu Apr 26, 2007 1:45 pm
by Burrito
don't declare your variable with 'var' within your loop.

Posted: Thu Apr 26, 2007 2:05 pm
by Weirdan
Burrito wrote:don't declare your variable with 'var' within your loop.
why?

Posted: Thu Apr 26, 2007 2:17 pm
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.

Posted: Thu Apr 26, 2007 2:18 pm
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.

Posted: Thu Apr 26, 2007 2:49 pm
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!