• 0

كيف يمكن مقارنة string مع multiple string بإستخدام JS

كيف يمكنن مقارنة النص الموضع داخل INPUT مع H3 موجود داخل DIV موجود داخل DIV ,,, جربة استخدام FOR..IN للمرور على كل H3 موجودة وطلعلي ERROR (ncaught TypeError: Cannot read property 'childNodes' of undefined)

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="pro2.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        
    </head>
    <body>
        
        <div id="parent">

        <div id="up">
            <h1>Add New Task</h1>
            <input type="text" id="addinput" placeholder="New Task">
            <div id="bdiv">
            <button onclick="newTask()" >Add task</button></div>
        </div>
        <div id="down">
            <h1>Filter Tasks</h1>
            <input type="text" id="filter" placeholder="filter Tasks" onclick="filterfun()">

        </div>
        <h2>List Of Tasks</h2>
        <div id="tasks">
            

        </div>
        <button class="zz"onclick="TP()">Clear tasks</button>
        
    </div>
        <script src="pro2.js"></script>
    </body>
</html>

JS

'use strict';
 let id=0;
 const tasks=document.getElementById('tasks');
 function newTask(){
// if the input is empty
     if(addinput.value === "" ) 
     alert("Enter a task plz!") ;

//if the input is number
     else if(!isNaN(addinput.value))
     alert("Enter a usefull task plz!") ;

//if the entered task is already exist
     else if(comp())
         alert("This task already exist")
     

     else{
     id++;
     let v1=document.getElementById("addinput").value;
    localStorage.setItem(id,v1);

    //new div in tasks
    let newdiv=document.createElement('div');
    newdiv.setAttribute("id", "task");
    tasks.appendChild(newdiv);

     //new h1 in newdiv
     let newh3=document.createElement('h3');
     newh3.setAttribute("id", "h3");
     newh3.addEventListener('click',()=>{
        newh3.style.textDecoration="line-through";

     });
     let newtext=document.createTextNode(localStorage.getItem(id));
     newh3.appendChild(newtext)
     newdiv.appendChild(newh3);

     //new i in newdiv
     let newi=document.createElement('i');
     newi.setAttribute("class", "bi bi-x-square-fill");
     newi.addEventListener('click',()=>{
        alert('are u shure');
        
        newi.parentNode.parentNode.removeChild(newi.parentNode);
        
     });
     newdiv.appendChild(newi);
     //empty the value after click
     addinput.value="";
    
 } 

}
//comperison between the enterd value and items in local storage
const comp=()=>{
    for(let i=0;i<=localStorage.length+1;i++)
    {
        if(addinput.value===localStorage.getItem(i))
        return true;
    }
    
    return false;

}

function TP(){
    
    // for(let z=1;z<tasks.childElementCount;z++)
    for(let z in tasks)
    {
        if(filter.value==tasks.childNodes[z].childNodes[0].textContent)
        console.log('hello');
    }
    // console.log(filter.value,typeof(filter.value));
    // console.log(tasks.childNodes[1].childNodes[0].textContent,typeof(tasks.childNodes[1].childNodes[0].textContent))
    
}
function filterfun(){
   
}
localStorage.clear();


 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

هذا السطر:

for(let z in tasks)

لن يعطيك النتيجة التي تريدها ﻷن tasks عقدة DOM وليست array أو ما شابه.

ما نريده هو هذا:

function TP(){
    
    // for(let z=1;z<tasks.childElementCount;z++)
    for(let task in tasks.childNodes)
    {
        if(filter.value==task.childNodes[0].textContent)
        console.log('hello');
    }
    // console.log(filter.value,typeof(filter.value));
    // console.log(tasks.childNodes[1].childNodes[0].textContent,typeof(tasks.childNodes[1].childNodes[0].textContent))
    
}

أي أننا نمر على  childNodes collection وليس على DOM object، لاحظ الفرق بين collection وobject.

لا أدري لماذا ظننت أن for(let z in tasks) سترد لك عداداً، إن for..in على object بغض النظر إن كان object عادي أو DOM object سوف يعطيك properties وmethods الخاصة بهذا الـobject أي أن for(let z in tasks) مطابق من حيث الفكرة للتالي:

const obj = {a: 2,b: 3,c: () => {return this.a + this.b}};
for(let z in obj){
  console.log(z); // a then b then c the name of the key
}

 

انشر على الشّبكات الاجتماعية


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

هذا الجزء من الشيفرة 

const tasks = document.getElementById('tasks');

اذا قمنا بطباعته سوف يعطينا 

<div id="tasks">
        <h3>sqsqs</h3>
        <h3>sqsqs</h3>
        <h3>sqsqs</h3>
        <h3>sqsqs</h3>
        <h3>sqsqs</h3>
      </div>

أنت تحتاج الى مجموعة ال h3 التي يمكن ان تتواجد في الداخل او بالتحديد النص المتواجد داخل كل h3 لذا ستحتاج الى NodeList

tasks.childNodes
tasks.childNodes.forEach((node) => {
  if (node.nodeName === 'H3') {
    console.log(node.innerText);
  }
});

الشيفرة بالأعلى كفيلة بان تأتي لك بكل النصوص الخاصة ب h3 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن