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

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

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

السؤال

Recommended Posts

  • 0

هل جربت القيام بذلك بنفسك ؟ إذا كنت قد جربت، فماهي المشاكل التي تواجهها حتى نقوم بمساعدتك ؟

إذا كنت ما تزال في مرحلة التعلم، فيمكنك القيام بذلك عبر التحكم بالـ 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
بتاريخ 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

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

شكرا يعطيك ألف عافية أخي شرحك جدا جميل و بسيط

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...