I have a class for selecting a Form depending on the chosen value from Select. I have a problem that, when I choose an option I see the desired form, but when I choose another option I have already two forms one under another, and when I choose the third option, I have all three forms together. What I need, that when changing the option, forms are changed as well.
Here is my code of class select:
export default class FormSelect {
constructor() {
this.self = document.createElement('div');
this.select = new SelectDoctor(["Cardiologist", "Dentist", "Therapist"], "doctor", "Choose doctor:").create();
}
render(modal) {
this.self.append(this.select);
modal.append(this.self);
this.select.addEventListener("change", () => {
const value = this.select.value;
this.chooseDoctor(value);
});
}
chooseDoctor(value) {
const modal = document.querySelector('.modal-2')
const cardio = new FormCardiologist();
const dentist = new FormDentist();
const therapist = new FormTherapist();
if (value === "Cardiologist") {
cardio.render(modal);
} else if (value === "Dentist") {
dentist.render(modal);
} else if (value === "Therapist") {
therapist.render(modal);
}
}
}
This is the method of main Form class:
render(modal) {
this.self.append(this.fullName, this.purpose, this.desc, this.priority, this.status, this.submit);
modal.append(this.self);
}
I achieved it by creating separate div element with class for forms, then on each change I clear innerHTML = "".
switch (value) {
case "Cardiologist":
modal.innerHTML = "";
cardio.render(modal);
break;
case "Dentist":
modal.innerHTML = "";
dentist.render(modal);
break;
case "Therapist":
modal.innerHTML = "";
therapist.render(modal);
break;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.