Uncaught ReferenceError: check is not defined at onchange

Question

I'm trying to show the "expandrepeat" div when choosing a specific select option. This is my not working code:

<script>
window.check=function(elem) {
    if (elem.selectedIndex == 1) {
        document.getElementById("expandrepeat").style.display = 'block';
    } else {
        document.getElementById("expandrepeat").style.display = 'none';
    }
};
</script>

html:

<div class="information-lane">
<p class="information-title">{{trans.modal.repeat}}</p>
<select class="information-input form-control" onChange="check(this);">
    <option value="-">No repeat</option>
    <option value="-">Daily</option>
    <option value="-">Weekly</option>
    <option value="-">Monthly</option>
    <option value="-">Yearly</option>
    <option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option>
    <option value="-">Custom...</option>
</select>
</div>
<div id="expandrepeat" style="display:none;">
  <p>Repeat every</p>
  <input>
</div>

Answer 1

If you're new to Vue, you should read the documentation on how to handleEvent Handling .

You could also use v-show instead of setting the display property manually.

 new Vue({ el: "#app", methods: { check: function(ev) { if (ev.target.value === "custom") document.getElementById("expandrepeat").style.display = 'block'; else document.getElementById("expandrepeat").style.display = 'none'; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="information-lane"> <select class="information-input form-control" @change="check"> <option value="-">No repeat</option> <option value="">Daily</option> <option value="-">Weekly</option> <option value="-">Monthly</option> <option value="-">Yearly</option> <option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option> <option value="custom">Custom...</option> </select> </div> <div id="expandrepeat" style="display:none;"> <p>Repeat every</p> <input> </div>