onmouseover doesn't function when onchange does?

Question

I've got a little script that toggles a button between disabled and not depending on the value of a number input. It works exactly as I'd expect when the event trigger is input.onchange, but it doesn't seem to work if I try to make the event button.onmouseover.

This works:

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input onchange="myFunction()" type="number" id="quantity" name="quantity" min="1" max="5">
  <input disabled id="submit" type="submit">
  <p id="number"></p>
</form>

<script>
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value >= "5") {
    y.toggleAttribute("disabled");
    } else if (y.hasAttribute("disabled") == false) {
    y.toggleAttribute("disabled");
    }
}
</script>

This does not:

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input onmouseover="myFunction()" disabled id="submit" type="submit">
  <p id="number"></p>
</form>

<script>
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value >= "5") {
    y.toggleAttribute("disabled");
    } else if (y.hasAttribute("disabled") == false) {
    y.toggleAttribute("disabled");
    }
}
</script>

If I remove the inital disabled attribute from the button, my else if toggle works, but the first if never toggles it off. Is there something about onmouseover that prevents it from checking the quantity value?

Answer 1

In HTML, disabled elements don't fire events, you can't hover or click them. You can wrap such element within a div and fire mouseover on that div. Here's code:

<form action="/action_page.php">
   <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <div style="display: inline;padding: 10px;" id="wrapper_submit">
    <input disabled id="submit" type="submit">
  </div>
  <p id="number"></p>
 </form>
<script>
  // After page load
  window.onload = function(){
    // Get div and on its mouseover
    document.getElementById("wrapper_submit").onmouseover = function(){
      var x = document.getElementById("quantity");
      var y = document.getElementById("submit");
      if (x.value > "5") y.disabled = true;
      else if(x.value >= "1") y.disabled = false;
    }
  }
</script>

Edit: Mouseover event only fires when cursor is over element it self, it will not fire if child element covers parent. In above case if you remove padding from [Div('wrapper_submit')], mouseover event will not work. Use mouse enter event, it works even if child covers parent 100%.

document.getElementById("wrapper_submit").onmouseenter = function(){
      var x = document.getElementById("quantity");
      var y = document.getElementById("submit");
      if (x.value > "5") y.disabled = true;
      else if(x.value >= "1") y.disabled = false;
    }