تایید اطلاعات با استفاده از جاوا اسکریپت (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>
Screenshot (6)_thumb.png
برچسب ها:
پرسیده شده در: 9 ماه قبل
آمار بازدید: 933
دارای ۲۰۰ کارما دارای ۲۰۰ کارما
سلام، لطفا کدها در قالب تگ کد ارسال کنید که قابل بررسی باشه. تصویری نمیشه چیزی رو تست کرد. - masoudsalehi در 9 ماه قبل
0

کد جاوا اسکریپت شما مشکل‌هایی دارد که باعث عدم کارکرد صحیح آن می‌شود. این مشکلات را بررسی کرده و راه‌حل‌های آن‌ها را برای شما توضیح می‌دهم:

در روش 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() // این بخش اصلاح شده است
})
ارسال شده در: 9 ماه قبل
masoudsalehi (1725)
بیش از ۲ سال عضویت در روکسو بیش از ۲ سال عضویت در روکسو دارای 1000 کارما دارای 1000 کارما نظرات دریافتی:‌ بیش از 50 نظرات دریافتی:‌ بیش از 50 دارای 25 پاسخ صحیح دارای 25 پاسخ صحیح ارسال کننده پاسخ با 25 رای ارسال کننده پاسخ با 25 رای
جهت ارسال پاسخ ابتدا عضو سایت شوید.