اذهب إلى المحتوى
  • 0

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

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

السؤال

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

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

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

Capture1.thumb.PNG.f4d310e0f451296fa6504f3018ecad69.PNG

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

شكرا.

تم التعديل في بواسطة Hassan Hedr
تنسيق الشيفرة وتوضيح العنوان
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

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

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

تم التعديل في بواسطة عمر قره محمد
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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>

 

تم التعديل في بواسطة Hassan Hedr
تنسيق الشيفرة
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

 console.log(icons[i])

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال Hassan Hedr:

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


 console.log(icons[i])

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


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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 للصفحة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

لكن يبدو ان ال 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 على الكيبورد ثم الاشارة على العنصر كما في الصورة المرفقة 

 

من دون عنوان.png

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال 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 دقائق مضت قال محمود سعداوي:

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

Capture1.JPG.3a1ccc14a76b36254d30ffce365fff90.JPG

الملف كاملا

card animation.zip

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

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

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

تم التعديل في بواسطة Hassan Hedr
إضافة الشيفرة
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 29 دقائق مضت قال Hassan Hedr:

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


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

 

شكرا

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...