oops, get element through function cunstructor

Question

Can somebody explain to me how this works I don't understand how validFields (this target to input element);

//check Fields
Customer.prototype.checkFields = function () {
  name.addEventListener("blur", this.validFields);
  course.addEventListener("blur", this.validFields);
  author.addEventListener("blur", this.validFields);
};

//valid Fileds
Customer.prototype.validFields = function () {
  if (this.value === "") {
    this.classList.add("invalid");
    console.log(this);
  } else if (this.value !== "") {
    this.classList.add("valid");
  }
};

Seems like there's some missing info here, what's the `Customer` class? What is `name`, `course` etc? — Phix, Sep 22 '20 at 20:15

score 0 · Answer 1 · answered Sep 22 '20 at 21:06

the check fields part , is adding a method to the prototype of (customer) class, this method is checking the fields name, course and author to add an event listener (blur) to them to perform the method (validFields) from below, after the blur had occurred;

valid fields part is adding another method to the prototype of (customer) class , it is called (validFields), it checks the value of the object represented by (this) keyword if it is "", it will add "invalid" to its classList, else it will add "valid" to its classList;

to explain the object represented by (this) keyword I will say it is the element you are acting on it and it is one of three (name, course and author), you added an event listener to each one of them in the first part of the code;

also there must be a CSS code to handle .valid and .invalid classes.

I hope this will explain the code to you.

is this.value replace with name.value ? similarly all – Rizwan Sep 23 '20 at 05:41 — Rizwan, Sep 23 '20 at 05:41
Yes if you are acting on the name field – Mohammed Nidhal Sep 23 '20 at 08:59 — Mohammed Nidhal, Sep 23 '20 at 08:59

oops, get element through function cunstructor

1 Answers1