An element's event could only be used once, otherwise, the second call will override the first.
Let me point you on this error:
- Code: Select all
<body id="company" onload="myPreload('white.jpg', '601.jpg', '602.jpg');">
You were calling "myPreload" function, on the onload event. This isn't erroneous in the first place, but it appears you're calling another function on the same event of "body" element. It's this part:
- Code: Select all
window.onload=make_hover_list;
Since the "inline" onload event comes later than your anonymous function assignee, then the above noted code is replaced by your "myPreload()" call.
To fix that issue, you need to do it like this:
- Code: Select all
window.onload=function () {
make_hover_list;
myPreload('white.jpg', '601.jpg', '602.jpg');
}
Going back to your issue, I suggest on using "switch" statement instead. This part:
- Code: Select all
<select name="bottom-end" class="custom" onchange="var bottom1=document.getElementById('bottom1'), bottom2 = document.getElementById('bottom2'), bottom3 = document.getElementById('bottom3'), bottom4 = document.getElementById('bottom4'); alert(this.value);
bottom1.style.display=this.value=='foil'?'none':''; bottom2.style.display=this.value=='foil'?'':'none'; ">
<option value="type" selected="selected">Bottom End Type</option>
<option value="default">Default</option>
<option value="foil">Foil Sealed</option>
<option value="beads">Beads</option>
<option value="droppertip">Dropper Tip</option>
</select>
...needs to be:
- Code: Select all
<select name="bottom-end" class="custom" id="myopt">
<option value="type" selected="selected">Bottom End Type</option>
<option value="default">Default</option>
<option value="foil">Foil Sealed</option>
<option value="beads">Beads</option>
<option value="droppertip">Dropper Tip</option>
</select>
...and add this code on the head section of your page:
- Code: Select all
window.addEventListener?window.addEventListener('load',customOpt,false):
window.attachEvent('onload',customOpt); // FF : IE
function customOpt() {
var opt = document.getElementById('myopt');
opt.onchange = function () {
var divs = ['bottom1','bottom2','bottom3','bottom4'];
customOpt.resetDivs(divs);
switch(this.value.toLowerCase()) {
case 'foil':
customOpt.domID(divs[1]).style.display='';
break;
case 'beads':
customOpt.domID(divs[2]).style.display='';
break;
case 'droppertip':
customOpt.domID(divs[3]).style.display='';
break;
default:
customOpt.domID(divs[0]).style.display='';
}
}
customOpt.resetDivs = function (arr) {
for (var i = 0 ; i < arr.length; i++)
this.domID(arr[i]).style.display='none';
}
customOpt.domID = function (el) {
return document.getElementById(el);
}
}
...and one last thing, remove "language="javascript"" here:
- Code: Select all
<script type="text/javascript" language="javascript">
...that is deprecated.
Hope that helps.
