Блог

У меня есть небольшой скрипт, который переключает кнопку между отключенной и не зависящей от значения ввода числа. Это работает точно так, как я ожидал бы, когда триггером события является input.onchange, но, похоже, это не сработает, если я попытаюсь сделать кнопку события.onmouseover.

Это работает:

 <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>
 

Это не означает:

 <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>
 

Если я удалю атрибут inital disabled с кнопки, мой переключатель else if сработает, но первый if никогда не отключит его. Есть ли что-то в onmouseover, что мешает ему проверить значение количества?

В HTML отключенные элементы не запускают события, вы не можете навести на них курсор или щелкнуть по ним. Вы можете поместить такой элемент в div и навести курсор мыши на этот div. Вот код:

 <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>
 

Редактировать: Событие наведения курсора мыши срабатывает только при наведении курсора на сам элемент, оно не сработает, если дочерний элемент покрывает родительский. В приведенном выше случае, если вы удалите заполнение из [Div(‘wrapper_submit’)], событие наведения курсора мыши не будет работать.
Используйте событие ввода мыши, оно работает, даже если ребенок покрывает родителя на 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;
    }
 
 

Это происходит потому, что ваш ввод отключен и он не реагирует, Попробуйте этот код и дайте мне знать, работает ли он для вас

 <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>
 

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