cannot set property 'color' of undefined

user_1826994 0
Viewed 7130

I'm trying to create a custom error message and styling based on validation (I know about plugins, but the time involved in coordinating the validation plugin with Materialize is too much for a single field).

HTML:

<div class="input-field inline center-align">
  <input id="quantity" name="quantity" type="number" class="">
  <label for="qty" data-error="wrong" data-success="right" 
       class="active">Qty</label>
  <span id="qty-error">really?</span>
</div>

JS:

$('#quantity').change(function(){
  var $Qty = $(this).val();
  var $Label = $('#qty-error');
  if ($Qty > 0 && $Qty <= $AvailTix){
      $Label.html('seems reasonable');
      $Label.style.color = '#8e8ef5';
      $(this).addClass('valid');
  } else if ($Qty < 1){
      $Label.html('really?');
      $Label.style.color ='#f96d63';
      $(this).addClass('invalid');
  }
});

What's confusing me is that the $Label.html piece is working. It changes the text. But I get this error in the console for the $Label.style.color line:

Uncaught TypeError: Cannot set property 'color' of undefined

jquery javascript
5 Answers

You get this error when you failed to bind style to an element appropriately. In AngularJS for instance <div *ngStyle="styleClass(variable)">{{variable.time}}</div> this will return cannot set undefined property color. Instead you should do this <div {ngStyle}="styleClass(variable)>{{variable.time}}</div>

for details on binding in AngularJS https://alligator.io/angular/style-binding-ngstyle-angular/

user_103070040
Related