معالجة الخطأ التالي: Uncaught SyntaxError: Identifier 'iconsBtn' has already been declared في جافاسكريبت

محمود سعداوي2 · 23 مايو 2022

السلام عليكم.

أقدم لكم شيفرة الجافاسكريبت التالية:

const iconsBtn            = document.querySelectorAll('.card-icon .fa-solid')

const changeBackground = document.querySelectorAll('.change-background')

console.log(icons)

for (let i = 0; i < iconsBtn.length; i++) {

    console.log(icons[i])

    iconsBtn[i].addEventListener('click', ()=>{

        console.log('hi')

    })

   

}

النتيجة في console التالية

Capture2.PNG.d3707f15b91e3ab58a8095e391918586.PNG

المشكلة عندما أقوم بالضغط على الزر في أعلى يسار الصورة console لايظهر شيء و لكنعندما قمت بنسخ و لصق الشيفرة المبينة في الconsole هرت رسالة الخطأ التالية:

Uncaught SyntaxError: Identifier 'iconsBtn' has already been declared

سبب الخطأ هو هنا "iconsBtn[i].addEventListener" و لكن لم أعرف ماهو بالضبط

شكرا.

تم التعديل في 23 مايو 2022 بواسطة Hassan Hedr
تنسيق الشيفرة وتوضيح العنوان

Hassan Hedr · 23 مايو 2022

بتاريخ 3 دقائق مضت قال محمود سعداوي:

قمت بالتعديلات اللازمة و النتيجة


.team-container{
    height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.team-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px 20px;
    width: 25%;
    background-color: #eee;
    position: relative;
}
.team-card:first-child{
    align-self: flex-end;
}
.team-card:last-child{
    align-self: flex-start;
}

.team-card img{
    width: 100%;
    filter: brightness(150%);
}
.team-card img:hover{
    filter: opacity(100%);
    transform: rotate(2deg);
}

.team-card h4{
    font-family: 'Bellota Text', cursive;
    font-size: 25px;
    font-weight: bold;
    color: rgba(250, 46, 46, 0.9);
}
.team-card span{
    color: rgba(250, 46, 46, 0.9);
    font-size: 20px;
    font-family: 'Bellota Text', cursive;
    margin-top: -30px;
    margin-bottom: 20px;
}
.card-icon i{
    position: absolute;
    top: 2px;
    left: 2px;
    color: rgb(250, 46, 46);
    font-size: 30px;
    cursor: pointer;
}

.team-info{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Bellota Text', cursive;
    color: #eee;
    transform: translateY(-30px);
    opacity: 0;
    transition: all 0.25s;
    /* background-color: blueviolet; */
}
.team-info p{
    text-align: justify;
    margin: 2px 10px;
}
.team-info-change{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.change-background{
    position: absolute;
    top: 0;
    height: 0;
    background-color: rgba(250, 46, 46, 0.9);
    width: 0;
    height: 100%;
    transition: width 0.5s;
}
.change-background-active{
    width: 100%;
}

الملف كاملا

card animation.zip

يرجى في المرات القادمة فقط إرفاق الشيفرة ضمن نص السؤال مع تنسيقها بشكل مناسب وعدم إرفاق ملفات المشروع، السبب في المشكلة هو ترتيب ظهور العناصر فوق بعضها حيث عنصر الصورة يغطي الزر ويمنع الضغط عليه، يمكن حل المشكلة بإضافة التنسيق التالي:

.card-icon {
    z-index: 1;
}

عمر قره محمد · 23 مايو 2022

هل بإمكانك مشاركة كود ال html اخي محمود حتى استيع فهم المشكلة بشكل افضل وكذلك شارك ملف ال js الكامل

تم التعديل في 23 مايو 2022 بواسطة عمر قره محمد

محمود سعداوي2 · 23 مايو 2022

بتاريخ 4 دقائق مضت قال عمر قره محمد:

هل بإمكانك مشاركة كود ال html اخي محمود حتى استيع فهم المشكلة بشكل افضل

تفضل

<div class="team-container">

        <div class="team-card">

            <img src="./img/team-member-1.jpg" alt="">

            <h4>John Doe</h4>

            <span>Web-Developer</span>

            <div class="card-icon">

                <i class="fa-solid fa-circle-plus"></i>

                <!-- <i class="fa-solid fa-circle-minus"></i> -->

            </div>

            <div class="team-info">

                <h3>About Me</h3>

                <p>

                    Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Reprehenderit obcaecati blanditiis aspernatur ab doloribus

                    optio nesciunt adipisci fugiat quia veritatis doloremque tempore

                    ipsum sunt atque exercitationem perspiciatis,

                    beatae aliquam voluptates perferendis.

                </p>

                <h3>Skills</h3>

                <p>

                    Javascript<br>

                    Java<br>

                    Python<br>

                    MySql

                </p>

            </div>

            <div class="change-background "></div>

        </div>



        <div class="team-card">

            <img src="./img/team-member-2.jpg" alt="">

            <h4>John Doe</h4>

            <span>Front-End-Developer</span>

            <div class="card-icon">

                <i class="fa-solid fa-circle-plus"></i>

                <!-- <i class="fa-solid fa-circle-minus"></i> -->

            </div>

            <div class="team-info">

                <h3>About Me</h3>

                <p>

                    Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Reprehenderit obcaecati blanditiis aspernatur ab doloribus

                    optio nesciunt adipisci fugiat quia veritatis doloremque tempore

                    ipsum sunt atque exercitationem perspiciatis,

                    beatae aliquam voluptates perferendis.

                </p>

                <h3>Skills</h3>

                <p>

                    Javascript<br>

                    Java<br>

                    Python<br>

                    MySql

                </p>

            </div>

        </div>



        <div class="team-card">

            <img src="./img/team-member-3.jpg" alt="">

            <h4>John Doe</h4>

            <span>Back-End-Developer</span>

            <div class="card-icon">

                <i class="fa-solid fa-circle-plus"></i>

                <!-- <i class="fa-solid fa-circle-minus"></i> -->

            </div>

            <div class="team-info">

                <h3>About Me</h3>

                <p>

                    Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Reprehenderit obcaecati blanditiis aspernatur ab doloribus

                    optio nesciunt adipisci fugiat quia veritatis doloremque tempore

                    ipsum sunt atque exercitationem perspiciatis,

                    beatae aliquam voluptates perferendis.

                </p>

                <h3>Skills</h3>

                <p>

                    Javascript<br>

                    Java<br>

                    Python<br>

                    MySql

                </p>

            </div>

        </div>

    </div>



    <script  src="script.js"></script>

تم التعديل في 23 مايو 2022 بواسطة Hassan Hedr
تنسيق الشيفرة

Hassan Hedr · 23 مايو 2022

المشكلة الثانية التي تظهر لك بسبب إعادة تعريفك لنفس المتغيرات التي عرفت سابقًا ضمن الصفحة عبر Console، لن ينجح الأمر في محاولة لصق الشيفرة مرة أخرى في Console، يرجى أولًا إرفاق شيفرة HTML للصفحة ومحاولة تبديل السطر التالي:

 console.log(icons[i])

بالسطر التالي للتأكد من عناصر الأزرار التي تضيف إليها الحدث click:

 console.log(iconsBtn[i])
             ^^^^^^^^

محمود سعداوي2 · 23 مايو 2022

بتاريخ 3 دقائق مضت قال Hassan Hedr:
المشكلة الثانية التي تظهر لك بسبب إعادة تعريفك لنفس المتغيرات التي عرفت سابقًا ضمن الصفحة عبر Console، لن ينجح الأمر في محاولة لصق الشيفرة مرة أخرى في Console، يرجى أولًا إرفاق شيفرة HTML للصفحة ومحاولة تبديل السطر التالي:
 console.log(icons[i])
بالسطر التالي للتأكد من عناصر الأزرار التي تضيف إليها الحدث click:
 console.log(iconsBtn[i])
             ^^^^^^^^

قمت بالتغيير ولكن نفس المشكل

Hassan Hedr · 23 مايو 2022

بتاريخ 6 دقائق مضت قال محمود سعداوي:

تفضل


<div class="team-container">

        <div class="team-card">

            <img src="./img/team-member-1.jpg" alt="">

            <h4>John Doe</h4>

            <span>Web-Developer</span>

            <div class="card-icon">

                <i class="fa-solid fa-circle-plus"></i>

                <!-- <i class="fa-solid fa-circle-minus"></i> -->

            </div>

            <div class="team-info">

                <h3>About Me</h3>

                <p>

                    Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Reprehenderit obcaecati blanditiis aspernatur ab doloribus

                    optio nesciunt adipisci fugiat quia veritatis doloremque tempore

                    ipsum sunt atque exercitationem perspiciatis,

                    beatae aliquam voluptates perferendis.

                </p>

                <h3>Skills</h3>

                <p>

                    Javascript<br>

                    Java<br>

                    Python<br>

                    MySql

                </p>

            </div>

            <div class="change-background "></div>

        </div>



        <div class="team-card">

            <img src="./img/team-member-2.jpg" alt="">

            <h4>John Doe</h4>

            <span>Front-End-Developer</span>

            <div class="card-icon">

                <i class="fa-solid fa-circle-plus"></i>

                <!-- <i class="fa-solid fa-circle-minus"></i> -->

            </div>

            <div class="team-info">

                <h3>About Me</h3>

                <p>

                    Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Reprehenderit obcaecati blanditiis aspernatur ab doloribus

                    optio nesciunt adipisci fugiat quia veritatis doloremque tempore

                    ipsum sunt atque exercitationem perspiciatis,

                    beatae aliquam voluptates perferendis.

                </p>

                <h3>Skills</h3>

                <p>

                    Javascript<br>

                    Java<br>

                    Python<br>

                    MySql

                </p>

            </div>

        </div>



        <div class="team-card">

            <img src="./img/team-member-3.jpg" alt="">

            <h4>John Doe</h4>

            <span>Back-End-Developer</span>

            <div class="card-icon">

                <i class="fa-solid fa-circle-plus"></i>

                <!-- <i class="fa-solid fa-circle-minus"></i> -->

            </div>

            <div class="team-info">

                <h3>About Me</h3>

                <p>

                    Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    Reprehenderit obcaecati blanditiis aspernatur ab doloribus

                    optio nesciunt adipisci fugiat quia veritatis doloremque tempore

                    ipsum sunt atque exercitationem perspiciatis,

                    beatae aliquam voluptates perferendis.

                </p>

                <h3>Skills</h3>

                <p>

                    Javascript<br>

                    Java<br>

                    Python<br>

                    MySql

                </p>

            </div>

        </div>

    </div>



    <script  src="script.js"></script>

المشكلة لديك في شيفرة جافاسكريبت تحاول طباعة متغير غير معرف مما يسبب مشكلة ويوقف تنفيذ باقي الشيفرة البرمجية حاول تغيير اسم المتغير icons الذي تحاول طباعته الى اسمه الصحيح iconsBtn كالتالي:

//..

console.log(iconsBtn)
            ^^^^^^^^

for (let i = 0; i < iconsBtn.length; i++) {

    console.log(iconsBtn[i])
                ^^^^^^^^^^^
    //..
}

في حال بقيت المشكلة بعد التعديلين لديك يرجى إرفاق تنسيقات CSS للصفحة

عمر قره محمد · 23 مايو 2022

الكود يعمل بالشكل الصحيح عندما قمت بتشغيله عندي

لكن يبدو ان ال li التي تملك ال class المسمى fa-solid فارغة

<div class="card-icon">
      <i class="fa-solid fa-circle-plus"></i>

      <!-- <i class="fa-solid fa-circle-minus"></i> -->
    </div>

وبالتالي لا تظهر على الشاشة وبالتالي لا تستطيع النقر عليها من الاصل

وظهرت مشكلة ثانية وهي ان العنصر iconsر في ملف ال JS غير معرف ولكن اظن ان هذه المشكلة حدثت لانك لم تشارك ملف ال JS بشكل كامل في سؤالك.

تاكد من انك تفقس على العنصر الصحيح صاحب ال class المسمى fa-solid ويمكن التاكد من ذلك عبر النقر على ctrl + shift + c على الكيبورد ثم الاشارة على العنصر كما في الصورة المرفقة

المشكلة التي تظهر عند اعادت كتابة الكود في ال console هي لأنك

قمت بتعريف المتغيرات من قبل في ملف ال JS

ثم تقوم بتعريفهم مرة اخرى عندما تقوم بلصق الكود في console

اذا لم يعمل الحل الذي ذكرته لك في الاعلى قم بمشاركة ملفات ال js و css

محمود سعداوي2 · 23 مايو 2022

بتاريخ منذ ساعة مضت قال Hassan Hedr:
المشكلة لديك في شيفرة جافاسكريبت تحاول طباعة متغير غير معرف مما يسبب مشكلة ويوقف تنفيذ باقي الشيفرة البرمجية حاول تغيير اسم المتغير icons الذي تحاول طباعته الى اسمه الصحيح iconsBtn كالتالي:
//..

console.log(iconsBtn)
            ^^^^^^^^

for (let i = 0; i < iconsBtn.length; i++) {

    console.log(iconsBtn[i])
                ^^^^^^^^^^^
    //..
}
في حال بقيت المشكلة بعد التعديلين لديك يرجى إرفاق تنسيقات CSS للصفحة

قمت بالتعديلات اللازمة و النتيجة

Capture1.JPG.3a1ccc14a76b36254d30ffce365fff90.JPG

.team-container{
    height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.team-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px 20px;
    width: 25%;
    background-color: #eee;
    position: relative;
}
.team-card:first-child{
    align-self: flex-end;
}
.team-card:last-child{
    align-self: flex-start;
}

.team-card img{
    width: 100%;
    filter: brightness(150%);
}
.team-card img:hover{
    filter: opacity(100%);
    transform: rotate(2deg);
}

.team-card h4{
    font-family: 'Bellota Text', cursive;
    font-size: 25px;
    font-weight: bold;
    color: rgba(250, 46, 46, 0.9);
}
.team-card span{
    color: rgba(250, 46, 46, 0.9);
    font-size: 20px;
    font-family: 'Bellota Text', cursive;
    margin-top: -30px;
    margin-bottom: 20px;
}
.card-icon i{
    position: absolute;
    top: 2px;
    left: 2px;
    color: rgb(250, 46, 46);
    font-size: 30px;
    cursor: pointer;
}

.team-info{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Bellota Text', cursive;
    color: #eee;
    transform: translateY(-30px);
    opacity: 0;
    transition: all 0.25s;
    /* background-color: blueviolet; */
}
.team-info p{
    text-align: justify;
    margin: 2px 10px;
}
.team-info-change{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.change-background{
    position: absolute;
    top: 0;
    height: 0;
    background-color: rgba(250, 46, 46, 0.9);
    width: 0;
    height: 100%;
    transition: width 0.5s;
}
.change-background-active{
    width: 100%;
}

الملف كاملا

card animation.zip

بتاريخ 3 دقائق مضت قال محمود سعداوي:

قمت بالتعديلات اللازمة و النتيجة

الملف كاملا

card animation.zip

الكود لم يعمل لذلك قمت بإعادة الكود في console حتى أعرف الخطأ.

أعتقد المشكلة في addEventListener ولكن لم أعرف بالضبط مكان الخطأ

ماأريده هو تغيير في الكلاسات عند الضط على الزر لكن حادث الضغط لم يمر أصلا.

تم التعديل في 23 مايو 2022 بواسطة Hassan Hedr
إضافة الشيفرة

محمود سعداوي2 · 23 مايو 2022

بتاريخ 29 دقائق مضت قال Hassan Hedr:
يرجى في المرات القادمة فقط إرفاق الشيفرة ضمن نص السؤال مع تنسيقها بشكل مناسب وعدم إرفاق ملفات المشروع، السبب في المشكلة هو ترتيب ظهور العناصر فوق بعضها حيث عنصر الصورة يغطي الزر ويمنع الضغط عليه، يمكن حل المشكلة بإضافة التنسيق التالي:
.card-icon {
    z-index: 1;
}

شكرا

كيف يمكنني معرفة مثل هذه الأخطاء و معالجتها لاحقا.

Hassan Hedr · 23 مايو 2022

بتاريخ 3 ساعات قال محمود سعداوي:

شكرا كيف يمكنني معرفة مثل هذه الأخطاء و معالجتها لاحقا.

مع الوقت وتكرار حدوث مشاكل مشابهة ستكون لديك الخبرة في حصر المشاكل المحتملة وتحديد المشكلة بدقة

معالجة الخطأ التالي: Uncaught SyntaxError: Identifier 'iconsBtn' has already been declared في جافاسكريبت

السؤال

محمود سعداوي2

10 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

عمر قره محمد

محمود سعداوي2

Hassan Hedr

محمود سعداوي2

Hassan Hedr

عمر قره محمد

محمود سعداوي2

محمود سعداوي2

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية