Menu
I created a form with a dropdown list as seen below:
[CODE]<form action=”#” name=”family” id=”family”>
Price range for a family of
<select name=”number” id=”number” style=”width:40px; margin-left:2px;” onchange=”giveEstimate()”>
<option value=””></option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>: <span id=”showrange”></span>
</form>
Here’s my corresponding JS:
[CODE]<script type=”text/javascript”>
<!–
function giveEstimate() {
document.getElementById(“showrange”).innerHTML = “”;
var n = document.getElementById(‘number’);
var numdiv = document.createElement(‘div’);
numdiv.id = “results”;
if (n.value == ‘2’) {
numdiv.innerHTML = “$990 – $1,030”;
}
if (n.value == ‘3’) {
numdiv.innerHTML = “$1,190 – $1,330”;
}
if (n.value == ‘4’) {
numdiv.innerHTML = “$1,380 – $1,630”;
}
if (n.value == ‘5’) {
numdiv.innerHTML = “$2,170 – $2,360”;
}
if (n.value == ‘6’) {
numdiv.innerHTML = “$2,370 – $2,660”;
}
if (n.value == ‘7’) {
numdiv.innerHTML = “$2,560 – $2,960”;
}
if (n.value == ‘8’) {
numdiv.innerHTML = “$2,760 – $3,260”;
}
var oldHTML = document.getElementById(“showrange”).innerHTML;
document.getElementById(“showrange”).innerHTML = oldHTML + numdiv.innerHTML;
}
</script>
The script should display the text associated with whatever number is chosen. This works in Firefox, but IE just sits there and twiddles its thumbs. I’m pretty new to doing JS so I’m sure there’s some small something that I’m missing to get it working. Any advice on a better way to code this is appreciated.