Div Display Hide on Selection

Hi There _ I'm a Newbie to all of this and really struggling with a dropdown menu that displays a div on loading but then hides the div and replaces with another on selection from a dropdown. I've spent hours trying to get this right and looked at a number of options. The closest I've got is a response to an earlier question on this. I've settled on is here.

I've adapted it slightly as don't want "Select...".

Script remains the same, as does the CSS. Here is the HTML which I've adapted:

<select id="target">
                    <option value="content_1">Option 1</option>
                    <option value="content_2">Option 2</option>
                    <option value="content_3">Option 3</option>
                </select>

                <div id="content_1" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 1</div>
                <div id="content_2" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 2</div>
                <div id="content_3" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 3</div>

and just in case here's the script:

<script>
    document
        .getElementById('target')
        .addEventListener('change', function() {
            'use strict';
            var vis = document.querySelector('.vis'),
                target = document.getElementById(this.value);
            if (vis !== null) {
                vis.className = 'inv';
            }
            if (target !== null) {
                target.className = 'vis';
            }
        });
</script>