Uncaught ReferenceError: check is not defined at onchange

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

If you’re new to Vue, you should read the documentation on how to handle Event 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>

Advertisement

Answer