Как изменить цвет фона тега ввода только для указанных значений c - PullRequest
Новая
       30

Как изменить цвет фона тега ввода только для указанных значений c

0 голосов
/ 29 февраля 2020

Я хочу установить background-color: #F5B7B1 свойство тега input, но только для значений меньше 1 и больше 1000. Почему этот код не работает? 

    function f() {
    var input=this.getElementById("number_input").value;
    if (input<1||input>1000)this.getElementById("number_input").style.backgroundColor=#F5B7B1;}
<form class="w3-container w3-card-4 w3-pale-green central">
    <h2>Desired Input</h2>

    <p><input class="w3-input w3-border" onmouseover="f()" type="number" id="number_input" placeholder="Enter a number between 1 and 1000!"></p>
</form>

1 Ответ

0 голосов
/ 29 февраля 2020

this внутренняя функция относится к объекту window , который не имеет getElementById()

Вы должны передать this функции, чтобы вы могли ссылаться на нее внутри функции , Я также думаю, что использование oninput событие здесь более значимо.

Также обратите внимание, что значение с цветовой кодировкой - строка, вы должны заключить его в кавычки ("#F5B7B1" или '#F5B7B1'). 

function f(el) {
  console.clear();
  console.log(this.constructor.name) //Window
  var input=el.value;
  if (input<1 || input>1000)el.style.backgroundColor="#F5B7B1";
  else{
    el.style.backgroundColor="lightgray";
  }
}
<form class="w3-container w3-card-4 w3-pale-green central">
  <h2>Desired Input</h2>

  <p><input class="w3-input w3-border" oninput="f(this)" type="number" id="number_input" placeholder="Enter a number between 1 and 1000!"></p>
</form>
...