I am attempting to use JavaScript to change the image that is displayed based on the option selected from a dropdown menu.
Using chrome monitorevents() I am able to tell that the change event is being triggered, however the variable direction is not being changed.
If I change the assigned value of direction manually, as you can see commented out, the correct image will display.
I’m sure it’s something minor I’m overlooking, but I’ve been noodling at this pretty much all day.
I would appreciate anyone’s input.
<div class="dropdown">
<label for="choose-lighting" id="windowDirection">Which direction does your window face?</label>
<select name="lighting" id="choose-lighting">
<option value="empty">--- Direction ---</option>
<option value="north">North</option>
<option value="south">South</option>
<option value="east">East</option>
<option value="west">West</option>
</select>
</div>
<div id="displayBox">
<img src="" id="onDisplay">
</div>
<script>
// var direction = document.querySelector("select");
// var onDisplay = document.getElementById("onDisplay")
var select = document.getElementById("choose-lighting");
var direction = select.options[select.selectedIndex].text;
console.log(direction);
// var direction = "south";
function chooseLighting() {
// switch (direction) {
// case "north":
// document.getElementById("onDisplay").src = "images/lightguide_north.jpg";
// break;
// case "south":
// document.getElementById("onDisplay").src = "images/lightguide_south.jpg";
// break;
// case "east":
// document.getElementById("onDisplay").src = "images/lightguide_east.jpg";
// break;
// case "west":
// document.getElementById("onDisplay").src = "images/lightguide_west.jpg";
// break;
// default:
// document.getElementById("onDisplay").src = "images/lightguide_genericweb.jpg";
// break;
// }
if(direction == "North") {
document.getElementById("onDisplay").src = "images/lightguide_north.jpg";
}
else if(direction == "South") {
document.getElementById("onDisplay").src = "images/lightguide_south.jpg";
}
else if(direction == "East") {
document.getElementById("onDisplay").src = "images/lightguide_east.jpg";
}
else if(direction == "West") {
document.getElementById("onDisplay").src = "images/lightguide_west.jpg";
}
else {
document.getElementById("onDisplay").src = "images/lightguide_genericweb.jpg";
}
}
if (window.addEventListener) {
window.addEventListener("load", chooseLighting, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", chooseLighting);
}
if (document.getElementById("choose-lighting").addEventListener) {
document.getElementById("choose-lighting").addEventListener("change", chooseLighting, false);
console.log(direction);
}
else if (document.getElementById("choose-lighting").attachEvent) {
document.getElementById("choose-lighting").attachEvent("onchange", chooseLighting);
console.log(direction);
}
</script>