Jason Chen Jason Chen - 24 days ago 16
React JSX Question

Javascript select an ID by its name

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>

Answer

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>

Comments