مشكلة اثناء بناء ألة حاسبة في جافاسكريبت

أبي عبد الرحمان نزار · 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/

أبي عبد الرحمان نزار · 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/

فعلا شكرا لك أنا لم أقم بإنهاء الدروة و كنت أعتقد أنني بامكاني القيام بذلك بالاعتماد فقط على الدوال فقط

Mustafa Suleiman · 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 التي تقوم بإضافة القيمة الخاصة بالزر وعرضها على الشاشة بجانب الأرقام الأخرى التي تم إدخالها.

أبي عبد الرحمان نزار · 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

عمر قره محمد

أبي عبد الرحمان نزار

Mustafa Suleiman

أبي عبد الرحمان نزار

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية