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

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

Oday Qsrawi

السؤال

كيف يمكنن مقارنة النص الموضع داخل 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();


 

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

Recommended Posts

  • 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 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...