اله حاسبه جافاسكريبت

إن الكود الموجود يقوم فقط بأخذ كل ما يتم إدخاله و إضافته إلى الخرج حيث أن ذلك يتم تماما في هذا المقطع من الكود:

num.forEach(item => {
    item.addEventListener("click", ()=>{
		value = input.value =  item.innerText  
		calc.innerText+=value
		console.log(); 
    })
});

للقيام بالعمليات الحسابية يجب أن نقوم بالتمييز بين الأزرار أيضاً، حيث أنه في الكود فإن جميع الأزرار لها نفس الصنف، بينما يجب علينا مثلاً إضافة حدث خاص عند النقر على عملية =  للقيام بالعملية المطلوبة و طباعة الناتج.

للقيام بالعملية الحسابية أيضاً يجب علينا تخزين العدد الأول المدخل و العدد الثاني المدخل و العملية مع ملاحظة أن العدد الأول المدخل قد لا يكون من خانة واحدة، أي أن حدث الضغط على زر الرقم لا يكفي، فيجب علينا أن نقوم ببناء الرقم حتى إدخال العملية الحسابية و هنا ينتهي الرقم الأول، و من ثم يبدأ الرقم الثاني و لا ينتهي حتى الضغط على عملية المساواة.

بتاريخ 2 دقائق مضت قال Kais Hasan:

للقيام بالعمليات الحسابية يجب أن نقوم بالتمييز بين الأزرار أيضاً، حيث أنه في الكود فإن جميع الأزرار لها نفس الصنف، بينما يجب علينا مثلاً إضافة حدث خاص عند النقر على عملية =  للقيام بالعملية المطلوبة و طباعة الناتج.

للقيام بالعملية الحسابية أيضاً يجب علينا تخزين العدد الأول المدخل و العدد الثاني المدخل و العملية مع ملاحظة أن العدد الأول المدخل قد لا يكون من خانة واحدة، أي أن حدث الضغط على زر الرقم لا يكفي، فيجب علينا أن نقوم ببناء الرقم حتى إدخال العملية الحسابية و هنا ينتهي الرقم الأول، و من ثم يبدأ الرقم الثاني و لا ينتهي حتى الضغط على عملية المساواة.

ممكن تعطيني مثال اكتب ايه

لاني مش فاهمه

بتاريخ 12 دقائق مضت قال zainb mohd:

ممكن تعطيني مثال اكتب ايه

لاني مش فاهمه

في البداية علينا التغيير في ملف ال html كما يلي:

<button class="op">-</button>
<button class="op">+</button>
<button class="op">x</button>
<br>
<button id="equal" >=</button>

لقد قمت بوضع ما يلزم تغييره، و بالتالي ما تبقى يمكن تركه كما هو.

الآن في كود ال javascript يجب علينا وضع حدث يستمع إلى العمليات، كما يجب التفريق بين أول رقم و ثاني رقم، سأضع مثال يوضح كيف يمكن القيام بذلك في حال كنا نريد تطبيق العمليات على أعداد من خانة واحدة، يكون الكود كما يلي:

في البداية نقوم بتعريف المتحولات المطلوبة، و سأعطيها القيمة null لتوضيح أنها لم تأخذ قيمة حتى الآن

let op = null;
let num1 = null;
let num2 = null;

الآن من أجل الأرقام سأقوم بتعديل هو أنه في حال كانت العملية لا تزال null أي أننا لم نقم بإدخالها بعد، فهذا يعني أننا نقوم بإدخال الرقم الأول و أضع قيمته في المتحول المطلوب، طبعا قيمة الدخل ستكون عبارة عن string و بالتالي يجب تحويلها إلى int عن طريق التابع parseInt كما هو موضح

num.forEach(item => {
    item.addEventListener("click", ()=>{
    
        value = input.value =  item.innerText  
        
        calc.innerText+=value
        console.log(); 
      
        if (op === null)
          num1 = parseInt(value);
        else
          num2 = parseInt(value);
    })
 
});

من ثم أقوم بإضافة الحدث الذي يقوم بمراقبة إذا ما تم إدخال عملية، و هنا نفس الكود السابق و لكن الفرق أنني أدخل العملية و أحتفظ بها في المتحول المناسب، في حال كانت العملية null فقط أقوم بوضع قيمتها و إلا لن أحدث قيمتها، كما أنني أقوم بطباعتها على الشاشة كما في حال الأرقام.

op_btns = document.querySelectorAll('.op');
op_btns.forEach(op_btn => {
  op_btn.addEventListener("click", () => {
    if (op === null){
      op=op_btn.innerText;
      calc.innerText += op
    }
  })
});

في النهاية يبقى الزر المسؤول عن حساب العملية و هنا أقوم في البداية باختبار في حال كانت هناك قيمة لم يتم إدخالها بعد فلا يجب حساب شيء و إلا فإنني أقوم بطباعة = على الشاشة من ثم أقوم بحساب العملية المطلوبة و طباعتها على الشاشة

eq_btn = document.getElementById('equal');
eq_btn.addEventListener("click", () => {
  if (op === null || num1 === null || num2 === null)
    return;
  calc.innerText += '=';
  let result = num1;
  switch(op){
    case '+':
      result+=num2;
      break;
    case 'x':
      result*=num2;
      break;
    case '-':
      result -= num2;
      break;
  }
  calc.innerText += result;
})

طبعا هنا المثال تعليمي و يجب تطويره لكي يقوم بمعالجة حالات الخطأ و حالة أعداد أكثر من خانة

هي لا تعمل لأنك لم تقومي ببرمجتها بعد أنت كل ما تقومين به هو كتابة الارقام والاشارات التي ينقرها المستخدم داخل العنصر المسمى calc :

let num = document.querySelectorAll(".num")
let calc= document.getElementById("calc")
let input= document.getElementById("input")

num.forEach(item => {
  item.addEventListener("click", ()=>{
    value = input.value =  item.innerText  
    calc.innerText+=value
  })
});

ولجعلها تعمل يجب تحويل النصوص لأرقام و واشارات، ولفعل ذلك يجب بناء وظيفة خاصة بمعرفة كون المستخدم يضيف ارقام ام اشارات وإذا اضاف اشارة معينة يجب ان نعلم ما هذه الاشارة ونقوم بحفظ الاشارة والرقم الذي ادخله بعدها نقوم بمعرفة الرقم الذي ادخله بعد ان ادخل الاشارة وعندما ينقر على الـ = نقوم بإجراء العملية الحسابية.

وهذا شكل بدائي للآلة الحاسبة الخاصة بك :

let num = document.querySelectorAll(".num")
let calc = document.getElementById("calc")
let input = document.getElementById("input")

// نعرف متغير خارج الوظيفة
let myNumber = "";
num.forEach(item => {
    item.addEventListener("click", () => {
        value = input.value = item.innerText;

        // نضيف مساحة لتفصل بين الارقام والاشارات
        if (value === "-" ||
            value === "+" ||
            value === "x") {
            value = " " + value
        }

        // نضيف مساحة مرة ثانية عندما يكون النص ينتهي بإشرارة
        // ليصبح النص يشبه 25 + 25
        // بدلا من ان يكون 25+ 25  
        if (myNumber.slice(-1) === "-" ||
            myNumber.slice(-1) === "+" ||
            myNumber.slice(-1) === "x") {
            value = " " + value
        }

        // الوظيفة الخاصة بالحساب والتتي تتنفذ عند النقر على المساواة
        if (value === "=") {
            // نحضر النص ونفصله حسب المساحات التي اضفناها
            const numbers = myNumber.split(" ");
            // 0 العنصر الاول سيكون هو الرقم الاول والذي يملك الترتيب       
            let firstNumber = Number(numbers[0]);
            // 2 العنصر الثالث سيكون هو الرقم الثاني والذي يملك الترتيب       
            let secondNumber = Number(numbers[2]);
            // العصنر الثاني سيكون هو الاشارة الخاصة بنا والتي تملك الترتيب 1
            // وهنا نفحص الاشارة ونقوم بالعمليات بناءً عليها
            if (numbers[1] === "+") {
                value =
                    " = " + (firstNumber + secondNumber);
            } else if (numbers[1] === "-") {
                value =
                    " = " + (firstNumber - secondNumber);
            } else if (numbers[1] === "x") {
                value =
                    " = " + (firstNumber * secondNumber);
            }
            //html نعرض النتيجة في 
            calc.innerText += value
            // نعيد ضبط النص ليصبح فارغا
            // وهذا سيسمح بإعادة العملية في حال اراد المستخدم الحاب مرة اخرى بعد الانتهاء من العلمية السابقة
            myNumber = "";
        } else {
            // نضيف القيمة للنص الخاص بنا
            myNumber += value;
            //html نعرض النص في 
            calc.innerText = myNumber
        }

    })
});