سؤال بجافا سكربت ما سبب الخطأ

Shahad Mohammad · 22 مايو 2022

هل يمكناخباري ما سبب هذا الخطأ؟ لدي 2 بوتون يعملون نفس الوظيفة ونفس الكود لكن مجرد تغير لاسم القائمة لانه واحد خاص بالقائمة لليمين والاخر لليسار ، المشكلة انه البوتون لليسار يعمل بشكل جيد اما اليمن لا فيعمل بشكل صحيح الا اذا نقرت عليه بعد تحديث الصفحة وبعدها اذا اردت استخدامه مرة اخرى يظهر لي الخطا التالي ولا اعلم السبب

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at HTMLSpanElement.<anonymous> (script.js:165:29)

هذا هو الكود

function subL()
    {
        let  list_1L = document.getElementById('list_li1_lL');
        let  list_2L = document.getElementById('list_li2_L');
        let user_skil = document.getElementById('user_skil').value;
        let  data = document.createTextNode(user_skil);
        let  li = document.createElement("LI");
        li.appendChild(data);
        list_1L.appendChild(li);

        let  data2 = document.createTextNode(user_skil);
        let  li2 = document.createElement("LI");
        li2.appendChild(data2);
        list_2L.appendChild(li2);

        let myspan1 = document.createElement('span')
        myspan1.innerHTML="x";
        li.appendChild(myspan1);

        let delete_skil1 = document.querySelectorAll('span');
        for(let i=0; i<delete_skil1.length;i++){
        delete_skil1[i].addEventListener('click', ()=>{
        delete_skil1[i].parentElement.style.display ="none";
        list_2L.children[i].style.display="none";
     })  
    }

    }

         ///////////////////////////////////////////
          
           function subR()
    {
        let  list_1L = document.getElementById('list_li1_R');
        let  list_2L = document.getElementById('list_li2_R');
        let user_skil = document.getElementById('user_skil1').value;
        let  data = document.createTextNode(user_skil);
        let  li = document.createElement("LI");
        li.appendChild(data);
        list_1L.appendChild(li);

        let  data2 = document.createTextNode(user_skil);
        let  li2 = document.createElement("LI");
        li2.appendChild(data2);
        list_2L.appendChild(li2);

        let myspan1 = document.createElement('span')
        myspan1.innerHTML="x";
        li.appendChild(myspan1);

        let delete_skil1 = document.querySelectorAll('span');
        for(let i=0; i<delete_skil1.length;i++){
        delete_skil1[i].addEventListener('click', ()=>{
        delete_skil1[i].parentElement.style.display ="none";
        list_2L.children[i].style.display="none";
    
    
     })  
    }

    }

تم التعديل في 22 مايو 2022 بواسطة Shahad Mohammad

شرف الدين حفني · 22 مايو 2022

هل يمكنك أخذ كود صفحة الhtml نسخ ولصقها في تعليق؟

Shahad Mohammad · 22 مايو 2022

بتاريخ 5 دقائق مضت قال شرف الدين2:

هل يمكنك أخذ كود صفحة الhtml نسخ ولصقها في تعليق؟

subR() و subL() التركيز في سؤالي على البوتون الذي يستدعي 


<div class="flex">
   <fieldset class="flex1">
    
    <div class="v">
        <input type="text" id="user_skil">
        <button onclick="mainL()">Add main subject</button>
        <button onclick=" subL()">Add sub </button>
  
        <ul id="list_li1_lL">
        
        </ul>

      
</fieldset>


<fieldset class="flex1">
    
    <div class="v">
        <input type="text" id="user_skil1">
        <button onclick="mainR()">Add main subject</button>
        <button onclick=" subR()">Add sub </button>
    
        <ul id="list_li1_R">
        
        </ul>
</fieldset>
    
</div>

     <div class="flex">
    <div class="flex1444">
        <ul id="list_li2_L">
         
        
        </ul>
     
        <div id="label_text_main"></div>
        <div id="label_text_sub"></div>

        <ul id="label_text_sub">
        
        </ul>
   
     
 </div>
 <div class="flex1444">
    <ul id="list_li2_R">
    
    </ul>
 
    <div id="label_text_main"></div>
    <div id="label_text_sub"></div>

    <ul id="label_text_sub">
    
    </ul>

 
</div>

</div>

شرف الدين حفني · 22 مايو 2022

بتاريخ 2 دقائق مضت قال Shahad Mohammad:

شهد هل يمكنك نسخ الجزئية التي يتم فيها استدعاء سكريبت الجافاسكريبت؟

Shahad Mohammad · 22 مايو 2022

بتاريخ 2 دقائق مضت قال شرف الدين2:

شهد هل يمكنك نسخ الجزئية التي يتم فيها استدعاء سكريبت الجافاسكريبت؟

ذكرت الكود بالسؤال الاساسي لكن هذا هو مرة اخرى

function subL()
    {
        let  list_1L = document.getElementById('list_li1_lL');
        let  list_2L = document.getElementById('list_li2_L');
        let user_skil = document.getElementById('user_skil').value;
        let  data = document.createTextNode(user_skil);
        let  li = document.createElement("LI");
        li.appendChild(data);
        list_1L.appendChild(li);

        let  data2 = document.createTextNode(user_skil);
        let  li2 = document.createElement("LI");
        li2.appendChild(data2);
        list_2L.appendChild(li2);

        let myspan1 = document.createElement('span')
        myspan1.innerHTML="x";
        li.appendChild(myspan1);

        let delete_skil1 = document.querySelectorAll('span');
        for(let i=0; i<delete_skil1.length;i++){
        delete_skil1[i].addEventListener('click', ()=>{
        delete_skil1[i].parentElement.style.display ="none";
        list_2L.children[i].style.display="none";
     })  
    }

    }

         ///////////////////////////////////////////
          
           function subR()
    {
        let  list_1L = document.getElementById('list_li1_R');
        let  list_2L = document.getElementById('list_li2_R');
        let user_skil = document.getElementById('user_skil1').value;
        let  data = document.createTextNode(user_skil);
        let  li = document.createElement("LI");
        li.appendChild(data);
        list_1L.appendChild(li);

        let  data2 = document.createTextNode(user_skil);
        let  li2 = document.createElement("LI");
        li2.appendChild(data2);
        list_2L.appendChild(li2);

        let myspan1 = document.createElement('span')
        myspan1.innerHTML="x";
        li.appendChild(myspan1);

        let delete_skil1 = document.querySelectorAll('span');
        for(let i=0; i<delete_skil1.length;i++){
        delete_skil1[i].addEventListener('click', ()=>{
        delete_skil1[i].parentElement.style.display ="none";
        list_2L.children[i].style.display="none";
    
    
     })  
    }

    }

لحظة فهمت

بتاريخ 1 دقيقة مضت قال Shahad Mohammad:

ذكرت الكود بالسؤال الاساسي لكن هذا هو مرة اخرى


function subL()
    {
        let  list_1L = document.getElementById('list_li1_lL');
        let  list_2L = document.getElementById('list_li2_L');
        let user_skil = document.getElementById('user_skil').value;
        let  data = document.createTextNode(user_skil);
        let  li = document.createElement("LI");
        li.appendChild(data);
        list_1L.appendChild(li);

        let  data2 = document.createTextNode(user_skil);
        let  li2 = document.createElement("LI");
        li2.appendChild(data2);
        list_2L.appendChild(li2);

        let myspan1 = document.createElement('span')
        myspan1.innerHTML="x";
        li.appendChild(myspan1);

        let delete_skil1 = document.querySelectorAll('span');
        for(let i=0; i<delete_skil1.length;i++){
        delete_skil1[i].addEventListener('click', ()=>{
        delete_skil1[i].parentElement.style.display ="none";
        list_2L.children[i].style.display="none";
     })  
    }

    }

         ///////////////////////////////////////////
          
           function subR()
    {
        let  list_1L = document.getElementById('list_li1_R');
        let  list_2L = document.getElementById('list_li2_R');
        let user_skil = document.getElementById('user_skil1').value;
        let  data = document.createTextNode(user_skil);
        let  li = document.createElement("LI");
        li.appendChild(data);
        list_1L.appendChild(li);

        let  data2 = document.createTextNode(user_skil);
        let  li2 = document.createElement("LI");
        li2.appendChild(data2);
        list_2L.appendChild(li2);

        let myspan1 = document.createElement('span')
        myspan1.innerHTML="x";
        li.appendChild(myspan1);

        let delete_skil1 = document.querySelectorAll('span');
        for(let i=0; i<delete_skil1.length;i++){
        delete_skil1[i].addEventListener('click', ()=>{
        delete_skil1[i].parentElement.style.display ="none";
        list_2L.children[i].style.display="none";
    
    
     })  
    }

    }

لحظة فهمت <script src="script.js"></script>

شرف الدين حفني · 22 مايو 2022

شهد لا أقصد هذا الكود, في ملف الhtml تقومين بإستدعاء ملف الجافاسكريبت عبر الوسم script وتقومين بوضع مسار الملف الجافاسكريبت في الخاصية src, أليس كذلك؟

أحتاج شفرة الhtml كاملةً حتى أتمكن من تحديد مكان إستدعاء ملف الجافاسكريبت

Shahad Mohammad · 22 مايو 2022

بتاريخ 4 دقائق مضت قال شرف الدين2:

شهد هل يمكنك نسخ الجزئية التي يتم فيها استدعاء سكريبت الجافاسكريبت؟

بتاريخ 1 دقيقة مضت قال شرف الدين2:

شهد لا أقصد هذا الكود, في ملف الhtml تقومين بإستدعاء ملف الجافاسكريبت عبر الوسم script وتقومين بوضع مسار الملف الجافاسكريبت في الخاصية src, أليس كذلك؟

أحتاج شفرة الhtml كاملةً حتى أتمكن من تحديد مكان إستدعاء ملف الجافاسكريبت

لحظات

شرف الدين حفني · 22 مايو 2022

بتاريخ الآن قال Shahad Mohammad:

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

ياشهد, أرجو قراءة التعليق بالأعلى

أحتاج إلى شفرة الhtml كاملةً في تعليق

Shahad Mohammad · 22 مايو 2022

بتاريخ الآن قال شرف الدين2:

ياشهد, أرجو قراءة التعليق بالأعلى

أحتاج إلى شفرة الhtml كاملةً في تعليق




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="imges/shahad-logo-0.png" type="imge/x-icon">
    <!--for convirsing html to pdf-->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"> </script>
    <title>Document</title>

       
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</head>


<body>


    
    <nav>
        <img src="imges/shahad-logo-0.png" >
      <ul class="links">
        <li><a href="# " class="link1">Home</a></li>
        <li><a href="# " class="link2">services</a></li>
        <li><a href="# " class="link2">Contact</a></li>
      </ul>
    </nav>

    <div class="first">
     
      <div class="first-p">
        
      <h1>Welcome to CV job site </h1>
      <p>The CV site enables you to create your CV automatically, all you have to do is enter your data and you will be able to save it upon completion, do not worry, our site is secure, as we do not keep our data</p>
     <a href="#c"> <button id="clear">let's go</button></a>
    </div>
    <div class="first-photo">
      <img src="imges/Resume-amico.png" width="520px" >
    </div>
  
    </div>
    <div id="c"></div>
    <div class="red-spase">
      <h1>Available languages</h1>
    </div>

 <div class="row"></div>
    <div class="cards">
  


<section class="all-card">

<a href="#contanar_form"><div class="card"> <img src="imges/united-kingdom.png"> English languages</div></a>
<a href="#contanar_form"><div class="card"> <img src="imges/saudi-arabia.png">  Arabic languages </div></a>
  </section>
 


</div>

<section class="all-starts">
  <h1 class="Start-h">What makes our services different ?</h1>
    <div class="start1">
      <img src="imges/Profiling-amico.png">
      <div class="text">
        <h3>Design a CV to suit your needs </h3>
   
<ul>
  <li>You can add the number of points that suits you, regardless of the number. </li>
  <li>You can delete the points you wrote and you feel are no longer relevant. </li>
  <li>You can add the topics you need in your resume, languages - skills ... etc. </li>
  <li>You can delete topics that do not serve your resume, languages - skills ... etc. </li>
</ul>
</div>
    </div>



    <div class="start2"  >
      <img src="imges/User flow-pana.svg">
      <div class="text">
        <h3>Ease of use </h3>
  
<ul>
  <li>Anyone, regardless of their skill in using the sites, can easily deal with our site. </li>
  <li>Speed in obtaining the service, you can get your CV within minutes. </li>
  <li>Convenient to use, our site is not complicated, but everything is clear. </li>
  <li> To get the service, you do not need to log in </li>
  
</ul>
</div>
    </div>

    
   

    <div class="start1">
      <img src="imges/Programming-pana.png">
      <div class="text">
        <h3>The service is free </h3>
      
<ul>
  
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </li>
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </li>
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </li>
</ul>
</div>
    </div>

    
    
         <br><br><br>
    </div>
</section>
 <!-----------------------------------------first part---------------------------------------->
 <div id="contanar_form"></div>
 
<section class="a">
    
    <h1 class="Start-h Start-hh"> English form</h1>
    
    <fieldset class="A">
        <legend>Personal information:</legend>
          <div class="live1">
           <div class="live11">
              <label>Full Name
               <input id="name-in" placeholder="your full Name"></input>
              </label>
           </div>
           <div class="live11">
            <label id="con"> Country
             <input  id="country-in" placeholder="From ware?"></input>
            </label>
         </div>
       </div>
       <div class="live1">
          <div class="live11">
           <label> Phone Number
             <input id="phone-in" placeholder="0500000000" ></input>
           </label>
          </div>
          <div class="live11">
           <label> Email
             <input id="Email-in" placeholder="123@cloud.com"></input>
           </label> 
          </div>
      </div>
   </fieldset>


   <!-----------------------------------------cecond part---------------------------------------->
<div class="flex">
   <fieldset class="flex1">
    
    <div class="v">
        <input type="text" id="user_skil">
        <button onclick="mainL()">Add main subject</button>
        <button onclick=" subL()">Add sub </button>
  
        <ul id="list_li1_lL">
        
        </ul>

      
</fieldset>


<fieldset class="flex1">
    
    <div class="v">
        <input type="text" id="user_skil1">
        <button onclick="mainR()">Add main subject</button>
        <button onclick=" subR()">Add sub </button>
    
        <ul id="list_li1_R">
        
        </ul>
</fieldset>
    
</div>

<div class="submit">
    <div>
     
      <a href="javascript:generatePDF()" id="downloud_pdf">downlowd pdf</a>
    </div>
   </div>


</div>

</section>


      

   <!-----------------------------------------live form ---------------------------------------->
   <!-----------------------------------------first part---------------------------------------->

<hr>
<section class="a">
   <div class="print"> 
            <div class="parsonal-information">
                 <p id="name-live"></p> 
                 <p id="counry-live"></p>
                  
                   <div class="f">
                   <p >[</p>
                   <p id="phone-live" ></p>
                   <p>]</p> <p>[</p>
                 <p id="Email-live" ></p>
                   <p>]</p>
                  </div>
            </div>
            
<!-----------------------------------------cecond part---------------------------------------->

         

     
    
        

 <div class="flex">
    <div class="flex1444">
        <ul id="list_li2_L">
         
        
        </ul>
     
        <div id="label_text_main"></div>
        <div id="label_text_sub"></div>

        <ul id="label_text_sub">
        
        </ul>
   
     
 </div>
 <div class="flex1444">
    <ul id="list_li2_R">
    
    </ul>
 
    <div id="label_text_main"></div>
    <div id="label_text_sub"></div>

    <ul id="label_text_sub">
    
    </ul>

 
</div>

</div> 


</section>


<footer>
  <div class="photo">
    <img src="imges/shahad-logo-0.png"  style="width: 100px;">

  </div>

  <div class="w">
    <p>website pages: </p> 
    <ul>
    <li>Home</li>
    <li>About me</li>
    <li>Contact me</li>
  </ul>
  </div>
<div class="o">
  <p>our tarms </p>
  <ul>
  <li>FAQ</li>
  <li>TERMS & CONDITIONS</li>
</ul>
</div>

<div class="contact"> <p>find us on </p>
       
  
  <a href="#" ><img src="imges/github (1).png" width="30px"> </a> 
  <a href="#" ></a>  <img src="imges/google-plus.png" width="30px"> </a> 
  <a href="#" ></a> <img src="imges/linkedin.png" width="30px"> </a> 
</div>
</footer>
<div class="copy"> Copyright 2022 Develope Allrights Reserved</div> 
</body>
<script src="script.js"></script>

</body>
</html>

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

حسب ما فهمت انه المطلوب من خلال السؤال الخاص بك

(عند النقر على العنصر في القائمة الاولى يتم حذف العنصر الموافق من القائمة الثانية دون ان ينحذف العنصر من القائمة الاولى)

يكون الحل الصحيح بالشكل التالي

function subL() {
  let list_1L = document.getElementById("list_li1_lL");
  let list_2L = document.getElementById("list_li2_L");
  let user_skil = document.getElementById("user_skil").value;
  let data = document.createTextNode(user_skil);
  //randomId  قمت بتوليد
  const randomId = Math.floor(Math.random() * 1000);
  // في البداية li2 قمت بتعريف
  // لأنني بحاجة لان ايكون هذا العنصر موجود كي اقوم بالاشارة إليه عند وضع الوظيفة الخاصة بالحذف في العنصر الثاني
  let data2 = document.createTextNode(user_skil);
  let li2 = document.createElement("LI");
  li2.appendChild(data2);
  li2.id = `li2${randomId}`;
  list_2L.appendChild(li2);

  let li = document.createElement("LI");
  li.appendChild(data);
//   قمت بإضافة وظيفة الحدذف التي تشير للأيدي الذي قمت بتعريفه
  li.onclick = () => {
    document.getElementById(`li2${randomId}`).remove();
  };
  list_1L.appendChild(li);

  document.getElementById("user_skil").value = "";
}

ما فعلته انا هو انني عرفت ال li2 في البداية ثم اعطيت id قمت بتوليده بشكل عشوائي لل li2 عند تعريفه

  const randomId = Math.floor(Math.random() * 1000);

  li2.id = `li2${randomId}`;

وبعد ذلك قمت بإعطاء onClick لل li عند تعريفه حيث اقوم بالاتيان بال li2 من خلال ال id المعطى نفسه ثم اقوم بحدثه remove()

li.onclick = () => {
    document.getElementById(`li2${randomId}`).remove();
  };

كما قمت باضافة السطر

  document.getElementById("user_skil").value = "";

من اجل تفريغ ال input بعد إضافة العنصر حتى لا يطر المستخدم للحذف ثم الكتابة إذا أراد إضافة عنصر جديد

سؤال بجافا سكربت ما سبب الخطأ

السؤال

Shahad Mohammad

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

Recommended Posts

شرف الدين حفني

Shahad Mohammad

شرف الدين حفني

Shahad Mohammad

شرف الدين حفني

Shahad Mohammad

شرف الدين حفني

Shahad Mohammad

عمر قره محمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية