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

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

Oday Qsrawi

السؤال

 

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

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

Recommended Posts

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

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...