احاول حل هذا التحدي https://www.frontendmentor.io/challenges/faq-accordion-wyfFdeBwBz

Ibrahim Fares2 · الخميس في 17:42

قمت بانشاء هذا الكود في الجافاسكريبت ولكني لا استطيع تبديل الصورة

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Frontend Mentor | FAQ accordion</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <style>
      /* @font-face {
    font-family: myFirstFont;
    src:local("/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf");} */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        background-color: hsla(279, 100%, 97%, 1);
        background-image: url(/assets/images/background-pattern-desktop.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 120%;
        font-family: Work Sans;

      }
  

      .mainImg {
        width: 25px;
      }
      .hiding {
        display: flex;
      }
      .hiding img {
        width: 50px;
      }
      .panel {
  padding: 0 18px;
  display: none;
  /* background-color: white; */
  overflow: hidden;
}
.accordion {
  /* background-color: #eee; */
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box{
  width: 40%;
  background-color: white;
  margin: auto;
  position: absolute;
 left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  
}
.hiding{
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}
p{
  text-align: left;
}

    </style>
  </head>
  <body>
      <!--div box -->
        <!-- hiding -->
          <div class="hiding">
            
          </div>
        <!-- // hiding -->
         <div class="box">
          <div class="hiding">    
            <img class="mainImg" src="/assets/images/icon-star.svg" alt="" />
            <h1>FAQs</h1>
          </div>
          
           <!-- question 1 -->
                  <button class="accordion">Wat is Frontend Mentor, and how will it help me? 
                    <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/>
                  </button>
                    <div class="panel">
                      <p>
                      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
                      aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
                      cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
                      voluptatem qui facilis beatae ab.
                    </p>
                    </div>
                    <button class="accordion">Wat is Frontend Mentor, and how will it help me? 
                      <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/>
                    </button>
                    <div class="panel">
                      <p>
                      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
                      aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
                      cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
                      voluptatem qui facilis beatae ab.
                    </p>
                    </div>
                    <button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/></button>
                    <div class="panel">
                      <p>
                      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
                      aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
                      cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
                      voluptatem qui facilis beatae ab.
                    </p>
                    </div>
                    <button class="accordion">Wat is Frontend Mentor, and how will it help me? <img class="imgaccordion" src="/assets/images/icon-plus.svg" alt=""/></button>
                    <div class="panel">
                      <p>
                      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
                      aliquam fuga eligendi saepe nostrum provident sapiente dignissimos
                      cum labore molestiae! Reiciendis, ut. Obcaecati ipsum maiores
                      voluptatem qui facilis beatae ab.
                    </p>
                    </div>
         </div>
                                       
                    
                  
          
    <div class="attribution">
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>
      <div>Coded by <a href="#">HemaFars</a></div>
    </div>
  </body>
  <script>
var acc = document.getElementsByClassName("accordion");
var i;
var img = document.getElementsByClassName("imgaccordion");


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");
    var panel = this.nextElementSibling;

    if (panel.style.display === "block") {
      panel.style.display = "none";
      img.src == "assets/images/icon-minus.svg"
    } else {
      panel.style.display = "block";
     
    }
    if(img.src === "assets/images/icon-plus.svg"){
      img.src = "assets/images/icon-minus.svg"
    }else
      img.src = "assets/images/icon-plus.svg"
  });
}
</script>
  </script>
</html>

برجاء المساعدة وتوضيح سبب عدم استطاعتي علما بانني قد درست اساسيات جافاسكريبت وHTML , CSS

محمد عاطف17 · الخميس في 18:37

يوجد لديك بعض الأخطاء أولا

بتاريخ 56 دقائق مضت قال Ibrahim Fares2:
img.src

في الكود السابق لاحظ أنك تستخدم المتغير img وهذا المتغير هو array لهذا فإن img.src لن تكون خاصة بالصورة الخاصة بالزر الذي يتم الضغط عليه لذلك يجب تعريف الصورة بداخل الدالة عن طريق querySelector من خلال this للحصول على الصورة التي بداخل الزر.

ثانيا في السطر التالي

بتاريخ 56 دقائق مضت قال Ibrahim Fares2:
if(img.src === "assets/images/icon-plus.svg")

هنا إذا قمت بطباعة الخاصية src ستجد أنها عنوان كامل وليس فقط "assets/images/icon-plus.svg" لهذا الشرط لن يتحقق والصحيح هو إستخدام الدالة includes والتي تتحق من أن السلسلة النصية تحتوي على النص الذي يمرر لها .

يمكنك تجربة الإفتراحات التالية ويجب أن يعمل معك ويمكنك إرسال الكود الذي قم بتعديله إذا لم تعمل معك حتي أخبرك إذا كانت توجد مشكلة به. حيث لا نقوم هنا على موقع الأكاديمية بحل أسئلة الإختبارات ولكن نقوم بتوجيهك للحل الصحيح.

احاول حل هذا التحدي https://www.frontendmentor.io/challenges/faq-accordion-wyfFdeBwBz

السؤال

Ibrahim Fares2

1 جواب على هذا السؤال

Recommended Posts

محمد عاطف17

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية