JavaScript 事件处理 - Select 未更改

Question

我正在尝试使用 JavaScript 更改根据从下拉菜单中选择的选项显示的图像。

使用 chrome moniterevents() 我可以看出正在触发更改事件，但是变量方向没有被更改。

如果我手动更改 direction 的指定值，如您所见，将显示正确的图像。

我敢肯定这是我忽略的小事，但我几乎一整天都在胡思乱想。

非常感谢任何人的意见。


    <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>

Answer 1

您对 direction 的绑定（a 的设置等于 b）只发生一次：在一开始。您应该在每次事件触发时访问该选项：在 event-handler.

中

您还应该在 select 上使用 .value，而不是 options[index].text。这将为您提供您在选项的 value 属性中输入的 empty、north、south 值，而不是字符串值，这对于在代码。通过使用 value 属性，您可以将它们直接替换到您的图像路径中。

通过这两种优化，您可以将代码简化为以下内容：

const select = document.querySelector('#choose-lighting');
// const onDisplay = document.querySelector('#on-display');

const chooseLighting = () => {
    const direction = select.value;
    
    let path;
    if (direction == 'empty')
        path = 'images/lightguide_genericweb.jpg';
    else
        path = `images/lightguide_${direction}.jpg`;

    // onDisplay.src = path;
    console.log('Set the image src to', path);
}

select.addEventListener('change', chooseLighting, false);
window.addEventListener('DOMContentLoaded', chooseLighting, false);

<label for="choose-lighting">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>

如果您真的愿意，您甚至可以将函数设为 one-liner，但这可能不是最易读的。

const chooseLighting = () => onDisplay.src = `images/lightguide_${select.value == 'empty' ? 'genericweb' : select.value}.jpg`;

编辑：根据您在评论中的问题，这里是使用更多...传统 JavaScript.

实现的相同内容

var select = document.querySelector('#choose-lighting');

function chooseLighting() {
    var direction = select.value;
    
    if (direction == 'empty') {
        var path = 'images/lightguide_genericweb.jpg';
    } else {
        var path = `images/lightguide_${direction}.jpg`;
    }

    console.log('Set the image src to', path);
}

select.addEventListener('change', chooseLighting, false);
window.addEventListener('DOMContentLoaded', chooseLighting, false);

<label for="choose-lighting">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>

我什至故意举了一个 var 很奇怪的例子。您可以看到，因为 var 具有函数作用域，所以我能够在 if 语句中执行 path 的声明。在任何其他语言中，这将使 path 仅在 if 或 else 的块结束之前有效。但不是 var：这种奇怪是 let 和 const 取代 var 的部分原因。这两个新关键字的行为与在任何其他语言中一样。

JavaScript 事件处理 - Select 未更改

JavaScript Event Handling - Select not changing

javascript

event-listener

event-handling

switch-statement

drop-down-menu