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

Oday Qsrawi · 11 أغسطس 2021

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

أحمد حبنكة · 12 أغسطس 2021

هذا السطر:

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
}

Salah Eddin Beriani2 · 13 أغسطس 2021

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

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

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

السؤال

Oday Qsrawi

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

Recommended Posts

أحمد حبنكة

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية