Display element when specific option is selected

JavaScript
10

[quote=“coothead, post:8, topic:226616, full:true”]
so it’s back to the drawing board then. :cold_sweat:[/quote]

Not at all. All of the above code achieves the same objective. It’s just a matter of how long it will be before we have to come back to it to make further changes. Ideally we do not ever want to come back to make changes to the code. But if we do, it should be as easy as possible to make the desired changes.

It’s far better to use CSS instead of using JavaScript to make the CSS changes. Mostly for management reasons again. When we want to change how something looks, it’s the CSS that we want to look at first.

What is not wanted is to search through the CSS, then through the HTML, then through the JS, only to realize that you had the PHP code saying how to style something. That’s a huge waste of time. It’s best to keep content in HTML, the styling in CSS, and the behaviour in JavaScript.

Thanks, that’s much appreciated. It’s ES5 though for my most recent large post.

Here’s the difference between ES5 and ES6 code, starting with the recommended ES5 code from before:

var source = document.querySelector("#location");
var displayValue = "loc5";
var target = document.querySelector("#second");

function displayWhenSelected(source, displayValue, target) {
    var selectedIndex = source.selectedIndex;
    if (source[selectedIndex].value === displayValue) {
        target.classList.add("show");
    } else {
        target.classList.remove("show");
    }
}
source.addEventListener("change", function () {
    displayWhenSelected(source, displayValue, target)
}, false);

With ES6, we can change the var assignments to let or const, where let is used for variables that you intend to change later, and const is used for what will not be changing.

const source = document.querySelector("#location");
const displayValue = "loc5";
const target = document.querySelector("#second");

function displayWhenSelected(source, displayValue, target) {
    const selectedIndex = source.selectedIndex;
    if (source[selectedIndex].value === displayValue) {
        target.classList.add("show");
    } else {
        target.classList.remove("show");
    }
}
source.addEventListener("change", function () {
    displayWhenSelected(source, displayValue, target)
}, false);

Next up, we can use fat-arrow notation for functions. This is where function () { … } is replaced with () => { … }
The fat-arrow notation has some different implications for the this keyword too (where it doesn’t change when going to a new fat-arrow function), but that’s of no consequence here.

const source = document.querySelector("#location");
const displayValue = "loc5";
const target = document.querySelector("#second");

const displayWhenSelected = (source, displayValue, target) => {
    const selectedIndex = source.selectedIndex;
    if (source[selectedIndex].value === displayValue) {
        target.classList.add("show");
    } else {
        target.classList.remove("show");
    }
};
source.addEventListener("change", () => {
    displayWhenSelected(source, displayValue, target)
}, false);

Other benefits of ES6 techniques aren’t all that relevant to the code that we’re using here, but we can certainly enclose all of the code within an immediately invoked function expression (called an IIFE), so that the variables and functions do not affect any other code that is outside of the IIFE.

Here are what the ES5 and ES6 IIFE’s look like:

// IIFE for ES5
var moduleName = (function () {
    // rest of code in here
}());

// IIFE for ES6
const moduleName = (() => {
    // rest of code in here
})();

In the ES5 code sample the enclosing parenthesis are not strictly necessary, but serve as an important indicator to other programmers about what is going on there. When they’re not being assigned to a module name, ES5 code requires the IIFE to be wrapped in parenthesis in order to allow the IIFE function to be invoked, so consistency here with the parentheses is handy.

The resulting ES6 code below ends up being not that much different from the ES5 code that we started with in this post.

(() => {
    const source = document.querySelector("#location");
    const displayValue = "loc5";
    const target = document.querySelector("#second");

    const displayWhenSelected = (source, displayValue, target) => {
        const selectedIndex = source.selectedIndex;
        if (source[selectedIndex].value === displayValue) {
            target.classList.add("show");
        } else {
            target.classList.remove("show");
        }
    };
    source.addEventListener("change", () => {
        displayWhenSelected(source, displayValue, target)
    }, false);
})();
3 Likes