تایید اطلاعات با استفاده از جاوا اسکریپت (Javascript)
سلام من مبحث class هارو از دوره JS روکسو مطالعه کردم و برای تمرین یک input درست کردم که کاربر نام دانشجوی مدنظرشو وارد میکنه (که اطلاعات اون دانشجو هارو در یک آرایه ذخیره کرده ام.) و می خوام با کلیک کردن روی دکمه تایید اطلاعات اون دانشجو برای کاربر نمایش داده بشه. هیچ اروری ندارم اما کدم کار نمیکنه ... :(
کدهای js:
const studentNameInput = document.getElementById('stu-name');
const modalDiv = document.getElementById('modal-div');
const studentList = document.getElementById('stu-list');
const clearBtn = document.getElementById('clear-btn');
const confirmBtn = document.getElementById('confirm-btn');
class Students {
constructor(stuName, stuMajor, stuUni,stuAge, stuCity){
this.stuName = stuName
this.stuMajor = stuMajor
this.stuUni = stuUni
this.stuAge = stuAge
this.stuCity = stuCity
}
}
class Handler {
studentInfo = [
new Students('آیدا سادین', 'آموزش شیمی', 'فرهنگیان','1379', 'شهریار'),
new Students('علی صبوری', 'MBA', 'صنعتی شریف', '1375', 'تهران'),
new Students('هانیه رضایی', 'هوشبری', 'علوم پزشکی ایران', '1377', 'تهران'),
new Students('مرضیه موسوی', 'پرستاری', 'علوم پزشکی تهران', '1378', 'قزین')
]
get confirm(){
const fullName = studentNameInput.value;
if(fullName == ''){
alert('لطفا نام دانشجو را وارد کنید');}
else{
for (let i = 0; i < this.studentInfo.length; i++) {
if (fullName == this.studentInfo[i]['stuName']){
const element = document.createElement('p')
element.innerHTML = `
نام و نام خانوادگی: ${this.studentInfo[i]['stuName']}<br/>
رشته: ${this.studentInfo[i]['stuMajor']}<br/>
دانشگاه: ${this.studentInfo[i]['stuUni']}<br/>
تاریخ تولد: ${this.studentInfo[i]["stuAge"]}<br/>
محل سکونت: ${this.studentInfo[i]['stuCity']}
`;
studentList.append('element')
modalDiv.classList.add('visible');
}else{
alert('اطلاعات دانشجو در سامانه ثبت نشده است')
}
}}}
clear() {
modalDiv.classList.remove('visible');
studentNameInput.value = ""
}
}
const handler = new Handler;
clearBtn.addEventListener('click', () => {
handler.clear()
})
confirmBtn.addEventListener('click', ()=>{
handler.confirm
})کدهای html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<meta name="author" content="Aida-Sadin">
<meta name="description" content="a list of my favorite movies">
<title> student informations </title>
<link href="style.css" rel="stylesheet">
<script src="app.js" defer></script>
</head>
<body>
<div class="modal" id="modal-div">
<div id="stu-list">
</div>
</div>
<main>
<div id="info-div">
<label for="stu-name">نام دانشجو را وارد نمایید</label>
<input type="text" id="stu-name">
<div id="button-div">
<button type="button" id="confirm-btn">تائید</button>
<button type="button" id="clear-btn">پاک کردن</button>
</div>
</div>
</main>
</body>
</html>
کد جاوا اسکریپت شما مشکل‌هایی دارد که باعث عدم کارکرد صحیح آن می‌شود. این مشکلات را بررسی کرده و راه‌حل‌های آن‌ها را برای شما توضیح می‌دهم:
در روش addEventListener برای دکمه confirmBtn، شما handler.confirm را به عنوان callback ارسال کرده‌اید. اما برای فراخوانی تابع confirm باید از پرانتز استفاده کنید. بنابراین باید کد زیر را به جای خط مشابه در کد خود قرار دهید:
confirmBtn.addEventListener('click', () => {
handler.confirm();
});
در تابع confirm، شما studentList.append('element') را نوشته‌اید. اینجا باید از متغیر element استفاده کنید، نه رشته 'element' به تنهایی. بنابراین باید خط زیر را به جای خط مشابه در کد خود قرار دهید:
studentList.append(element);و همچنین باید در حلقه for ای که پیاده سازی کرده اید یک دستور break بگذارید که اگر دانشجو پیدا شد پیمایش حلقه را متوقف کند.
در ضمن به جای استفاده از آرایه ها در فراخوانی المان ها توصیه می کنم از علامت دات ( . ) استفاده کنید. مثلا به جای this.studentInfo[i]['stuName'] بنوسید this.studentInfo[i].stuName
کد نهایی جاوا اسکریپت شما باید به صورت زیر باشد. لطفا به کامنت هایی که نوشتم دقت کنید:
const studentNameInput = document.getElementById('stu-name');
const modalDiv = document.getElementById('modal-div');
const studentList = document.getElementById('stu-list');
const clearBtn = document.getElementById('clear-btn');
const confirmBtn = document.getElementById('confirm-btn');
class Students {
constructor(stuName, stuMajor, stuUni,stuAge, stuCity){
this.stuName = stuName
this.stuMajor = stuMajor
this.stuUni = stuUni
this.stuAge = stuAge
this.stuCity = stuCity
}
}
class Handler {
studentInfo = [
new Students('آیدا سادین', 'آموزش شیمی', 'فرهنگیان','1379', 'شهریار'),
new Students('علی صبوری', 'MBA', 'صنعتی شریف', '1375', 'تهران'),
new Students('هانیه رضایی', 'هوشبری', 'علوم پزشکی ایران', '1377', 'تهران'),
new Students('مرضیه موسوی', 'پرستاری', 'علوم پزشکی تهران', '1378', 'قزین')
]
get confirm(){
const fullName = studentNameInput.value;
if(fullName == ''){
alert('لطفا نام دانشجو را وارد کنید');}
else{
for (let i = 0; i < this.studentInfo.length; i++) {
console.log(fullName, this.studentInfo[i].stuName)
if (fullName == this.studentInfo[i].stuName){
const element = document.createElement('p')
element.innerHTML = `
نام و نام خانوادگی: ${this.studentInfo[i].stuName}<br/>
رشته: ${this.studentInfo[i].stuMajor}<br/>
دانشگاه: ${this.studentInfo[i].stuUni}<br/>
تاریخ تولد: ${this.studentInfo[i].stuAge}<br/>
محل سکونت: ${this.studentInfo[i].stuCity}
`;
studentList.append(element) // این بخش اصلاح شده است
modalDiv.classList.add('visible');
break; // این بخش اضافه شده است
}else{
alert('اطلاعات دانشجو در سامانه ثبت نشده است')
}
}}}
clear() {
modalDiv.classList.remove('visible');
studentNameInput.value = ""
}
}
const handler = new Handler();
clearBtn.addEventListener('click', () => {
handler.clear()
})
confirmBtn.addEventListener('click', ()=>{
handler.confirm() // این بخش اصلاح شده است
})
بیش از ۲ سال عضویت در روکسو
دارای 1000 کارما
نظرات دریافتی: بیش از 50
دارای 25 پاسخ صحیح
ارسال کننده پاسخ با 25 رای
آخرین دوره‌های آموزشی روکسو
سوالات مرتبط
روکسو در اینستاگرام
به جمع هزاران کاربر اینستاگرامی روکسو بپیوندید.