• 0

كيف يمكنني ان استعمل اكثر من button لفعل نفس النتيجة بإستخدام دالة onclick()

 

اريد ان يظهر لي ALERT بعد الضغط على اي تاغ من نوع (i) ,, مع العلم انني استخدم JS HTML DOM لخلقها كما هو موضح بالjs

 

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">
        <!-- @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); -->

        <!-- <i class="bi bi-x-square-fill"></i> -->
    </head>
    <body>
        
        <div id="parent">

        <div id="up">
            <i class="bi bi-x-square-fill" id="ii"></i>
            <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">

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

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

JS

 let id=0;
 const tasks=document.getElementById('tasks');
 function newTask(){
     id++;
     let v1=document.getElementById("addinput").value;
    localStorage.setItem(id,v1);
    //new div in tasks
    let newdiv=document.createElement('div');
    tasks.appendChild(newdiv);
    newdiv.setAttribute("id", "task");
     //new h1 in newdiv
     let newh3=document.createElement('h3');
     let newtext=document.createTextNode(localStorage.getItem(id));
     newh3.appendChild(newtext)
     newdiv.appendChild(newh3);
     newh3.setAttribute("id", "h3");
     //new i in newdiv
     let newi=document.createElement('i');
     newdiv.appendChild(newi);
     newi.setAttribute("class", "bi bi-x-square-fill");
    
 } 


document.querySelectorAll("i").addEventListener("click",icon)

function icon(){
    alert('are u shure');
    
    // const newicon=document.getElementById('bi');
    // newicon.parentNode.removeChild(newicon);
}

image_2021-08-11_165124.png

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

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


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

بما أن عقد i تضاف ديناميكياً فقبل إضافتها أي قبل استدعاء التابع newTask هي غير موجودة ضمن document لذلك التعليمة التالية:

document.querySelectorAll("i").addEventListener("click",icon)

لن تعمل، فلنزلها وننظر أين نقوم بإضافة عقدة i إلى document ؟ هنا:

//new i in newdiv
let newi=document.createElement('i');
newdiv.appendChild(newi);
newi.setAttribute("class", "bi bi-x-square-fill");

هنا يمكننا تعريف onclick بإحدى طريقتين إما:

//new i in newdiv
let newi=document.createElement('i');
newdiv.appendChild(newi);
newi.setAttribute("class", "bi bi-x-square-fill");
newi.onclick = icon;

أو نستخدم addEventListener هكذا:

//new i in newdiv
let newi=document.createElement('i');
newdiv.appendChild(newi);
newi.setAttribute("class", "bi bi-x-square-fill");
newi.addEventListener('click',icon);

وعلى فكرة يمكن جعل appendChild في النهاية هكذا:

//new i in newdiv
let newi=document.createElement('i');
newi.setAttribute("class", "bi bi-x-square-fill");
newi.addEventListener('click',icon);
newdiv.appendChild(newi);

فقد جرت العادة أننا نجهز العقدة أولاً ثم نضيفها إلى document.

المعنى من كل هذا أن ناتج الدالة document.createElement هي عقدة DOM تملك جميع خصائص DOM بما في ذلك onclick حتى ولو لم تضف إلى document بعد أي لم تضف إلى الواجهة التي تظهر للمستخدم.

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

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


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

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

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

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


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

تسجيل الدخول

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


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