أبي عبد الرحمان نزار نشر 30 مايو 2023 أرسل تقرير نشر 30 مايو 2023 أريد أن يظهر ما أضغط عليه في شاشة الآلة الحاسبة 1 اقتباس
0 عمر قره محمد نشر 30 مايو 2023 أرسل تقرير نشر 30 مايو 2023 هل جربت القيام بذلك بنفسك ؟ إذا كنت قد جربت، فماهي المشاكل التي تواجهها حتى نقوم بمساعدتك ؟ إذا كنت ما تزال في مرحلة التعلم، فيمكنك القيام بذلك عبر التحكم بالـ dom. وهذا مثال بسيط لعداد مع زر إضافة وتنقيص يوضح كيفية التعامل مع الـ DOM في js والية التلاعب بأكواد الـ html في js : <!DOCTYPE html> <html> <head> <title>Counter</title> </head> <body> <h1>Counter</h1> <!-- يتم إنشاء زرين، أحدهما للزيادة والآخر للنقصان --> <button onclick="decrement()">-</button> <span id="count">0</span> <button onclick="increment()">+</button> <script> // يتم تعريف متغير count وتعيين قيمته الأولية إلى 0 let count = 0; // يتم الحصول على العنصر span بواسطة معرفه وتخزينه في متغير countElement const countElement = document.getElementById("count"); // يتم تعريف دالة increment لزيادة قيمة المتغير count بواحد وتحديث نص العنصر span function increment() { count++; countElement.textContent = count; } // يتم تعريف دالة decrement لإنقاص قيمة المتغير count بواحد وتحديث نص العنصر span function decrement() { count--; countElement.textContent = count; } </script> </body> </html> يمكنك التعلم عن الـ dom من هنا : https://academy.hsoub.com/questions/23559-ما-هو-الـ-dom-في-javascript/ اقتباس
0 أبي عبد الرحمان نزار نشر 30 مايو 2023 الكاتب أرسل تقرير نشر 30 مايو 2023 بتاريخ On 28/5/2023 at 15:24 قال Adnane Kadri: لتلافي حدوث مثل هاته المشكلة قم بوضع كل من الصورة والنص في حاوية مرنة يتم تطبيق التنسيق display flex عليها، ويتم ضبط قيمة align-items لديها بـ center: <div> <h2>hey</h2> <img src="path/to/image" /> </div> div{ display: flex; align-items: center; } الخاصية align-items بتاريخ 5 دقائق مضت قال عمر قره محمد: هل جربت القيام بذلك بنفسك ؟ إذا كنت قد جربت، فماهي المشاكل التي تواجهها حتى نقوم بمساعدتك ؟ إذا كنت ما تزال في مرحلة التعلم، فيمكنك القيام بذلك عبر التحكم بالـ dom. يمكنك التعلم عن الـ dom من هنا : https://academy.hsoub.com/questions/23559-ما-هو-الـ-dom-في-javascript/ فعلا شكرا لك أنا لم أقم بإنهاء الدروة و كنت أعتقد أنني بامكاني القيام بذلك بالاعتماد فقط على الدوال فقط اقتباس
0 Mustafa Suleiman نشر 30 مايو 2023 أرسل تقرير نشر 30 مايو 2023 مثلما أشار إليك عمر أنت بحاجة إلى التلاعب بالـ DOM من أجل عرض قيمة الزر الذي تضغط عليه على شاشة الآلة الحاسبة في المكان المخصص لها، وإليك مثال بسيط تستطيع تجربته بنفسك: <!DOCTYPE html> <html> <head> <title>آلة حاسبة</title> <style> .calculator { width: 200px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <div class="calculator"> <input type="text" id="screen" disabled> <br> <button id="btn1">1</button> <button id="btn2">2</button> <button id="btn3">3</button> <br> <button id="btn4">4</button> <button id="btn5">5</button> <button id="btn6">6</button> <br> <button id="btn7">7</button> <button id="btn8">8</button> <button id="btn9">9</button> <br> <button id="btn0">0</button> </div> <script> const screen = document.getElementById("screen"); function appendToScreen(number) { screen.value += number; } const buttons = document.querySelectorAll("button"); buttons.forEach((button) => { button.addEventListener("click", (event) => { const number = event.target.innerHTML; appendToScreen(number); }); }); </script> </body> </html> استخدمتquerySelectorAll بدلاً من getElementsByTagName أو getElementById للحصول على جميع الأزرار، ثم استخدمت forEach للتكرار عبر كل عنصر زر وإضافة الحدث click بداخله. وعرفت المتغير number داخل الحدث للحصول على قيمة الزر، وبالمثل، عرفت الدالة المخصصة appendToScreen التي تقوم بإضافة القيمة الخاصة بالزر وعرضها على الشاشة بجانب الأرقام الأخرى التي تم إدخالها. اقتباس
0 أبي عبد الرحمان نزار نشر 30 مايو 2023 الكاتب أرسل تقرير نشر 30 مايو 2023 بتاريخ 11 دقائق مضت قال Mustafa Suleiman: مثلما أشار إليك عمر أنت بحاجة إلى التلاعب بالـ DOM من أجل عرض قيمة الزر الذي تضعط عليه على شاشة الآلة الحاسبة في المكان المخصص لها، وإليك مثال بسيط تستطيع تجربته بنفسك: <!DOCTYPE html> <html> <head> <title>آلة حاسبة</title> <style> .calculator { width: 200px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <div class="calculator"> <input type="text" id="screen" disabled> <br> <button id="btn1">1</button> <button id="btn2">2</button> <button id="btn3">3</button> <br> <button id="btn4">4</button> <button id="btn5">5</button> <button id="btn6">6</button> <br> <button id="btn7">7</button> <button id="btn8">8</button> <button id="btn9">9</button> <br> <button id="btn0">0</button> </div> <script> const screen = document.getElementById("screen"); function appendToScreen(number) { screen.value += number; } const buttons = document.querySelectorAll("button"); buttons.forEach((button) => { button.addEventListener("click", (event) => { const number = event.target.innerHTML; appendToScreen(number); }); }); </script> </body> </html> استخدمتquerySelectorAll بدلاً من getElementsByTagName أو getElementById للحصول على جميع الأزرار، ثم استخدمت forEach للتكرار عبر كل عنصر زر وإضافة الحدث click بداخله. وعرفت المتغير number داخل الحدث للحصول على قيمة الزر، وبالمثل، عرفت الدالة المخصصة appendToScreen التي تقوم بإضافة القيمة الخاصة بالزر وعرضها على الشاشة بجانب الأرقام الأخرى التي تم إدخالها. شكرا يعطيك ألف عافية أخي شرحك جدا جميل و بسيط اقتباس
السؤال
أبي عبد الرحمان نزار
أريد أن يظهر ما أضغط عليه في شاشة الآلة الحاسبة
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.