Javascript select an ID by its name

Question

I have an option select that is supposed to change the div content by matching the name of the ID in my HTML (in monthchosen) with the value that has been chosen by the user.

The only problem I'm having is that I do not know how to check the option value against the div id using plain javascript. The final part months[i].id.includes(monthchosen) is incorrect, though hopefully gets across what I am trying to accomplish. I have content under div ids named after the option select (ie: <div id="oct2016">) that I would like to show when the names correspond.

My example uses React, though a solution in pure JS might suffice.

My JavaScript:

updatedate:function(){
    var months = document.getElementsByClassName('month');
    var monthchosen = this.refs.datechosen;
    for (var i = 0; i < months.length; i++){
        months[i].style.display = 'none';
        months[i].id.includes(monthchosen).style.display = 'block';
    }
}

My HTML

    <select ref="datechosen" id="datechosen" onChange={this.updatedate}>
        <option value="nov2016">November 2016</option>
        <option value="oct2016">October 2016</option>
    </select>

the error is `cannot set display of undefined`. this is because the includes returns to me a boolean, not an editable property. — Jason Chen, Nov 08 '16 at 20:20
A react component really shouldn't be running global queries `var months = document.getElementsByClassName('month');` makes your component not be reusable — Ruan Mendes, Nov 08 '16 at 20:21
Have the function updatedate called on change like you have it, but get the selected value by using document.getElementById("datechosen").value; — Dylan Steele, Nov 08 '16 at 20:22

score 1 · Accepted Answer · edited May 23 '17 at 10:32

I had to search w3schools for various simple but clutch JavaScript syntax. I ask you to forgive me because I learned jQuery first so I do not know all of the vanilla equivalents off hand. JavaScript has default methods to query what was selected in a <selection> element. Also the following StackOverflow post got me like 95% of the way there: How to select all children of an element with javascript and change CSS property?

What happens is we capture the value attribute in a variable immediately when the function is invoked. Then, we loop through again and use the JavaScript ternary method to quickly compare what should be hidden and what should be displayed.

HTML:

<select ref="datechosen" id="datechosen" onChange=updatedate()>
    <option value="dec2016">December 2016</option>
    <option value="nov2016">November 2016</option>
    <option value="oct2016">October 2016</option>
</select>
<div id='dec2016' class='month'>
    DEC
</div>
<div id='oct2016' class='month'>
    OCT
</div>
<div id='nov2016' class='month'>
    NOV
</div>

JavaScript:

<script>
    function updatedate() {
        var months = document.getElementsByClassName('month');
        var whichIsSelected = '';

        var nodes = document.getElementById('datechosen').childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].selected) {
                whichIsSelected = nodes[i].value;
            }
        }
        for (var x = 0; x < months.length; x++) {
            months[x].style.display = (months[x].id === whichIsSelected) ? 'block' : 'none';
        }

        console.log(whichIsSelected);
    }

</script>

    function updatedate() {
        var months = document.getElementsByClassName('month');
        var whichIsSelected = '';
        //var monthchosen = this.attr.ref;

        var nodes = document.getElementById('datechosen').childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].selected) {
                //whichIsSelected.push(nodes[i].value);
                whichIsSelected = nodes[i].value;
            }
        }
        for (var x = 0; x < months.length; x++) {
            months[x].style.display = (months[x].id === whichIsSelected) ? 'block' : 'none';
        }


        console.log(whichIsSelected);
    }

<select ref="datechosen" id="datechosen" onChange=updatedate()>
    <option value="dec2016">December 2016</option>
    <option value="nov2016">November 2016</option>
    <option value="oct2016">October 2016</option>
</select>
<div id='dec2016' class='month'>
    DEC
</div>
<div id='oct2016' class='month'>
    OCT
</div>
<div id='nov2016' class='month'>
    NOV
</div>

Javascript select an ID by its name

1 Answers1