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

Oday Qsrawi · 11 أغسطس 2021

اريد ان يظهر لي 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);
}

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

بما أن عقد 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 بعد أي لم تضف إلى الواجهة التي تظهر للمستخدم.

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

السؤال

Oday Qsrawi

1 جواب على هذا السؤال

Recommended Posts

أحمد حبنكة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية