خطأ في العمليات الحسابية Javascript

iAbdullah95 · 8 نوفمبر 2018

بسم الله الرحمن الرحيم

السلام عليكم

قمت بتصميم أداة تقوم بعمل حسابات رياضية بسيطة جداً لكن النواتج تظهر بشكل خاطئ في حال تجاوزت الرقم 9 في أي حقل

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>A tool</title>
        <meta name="description" content="A tool">
        
        <link rel="stylesheet" href="main.css">

    </head>
    <body>
        
        <h1>أداة تعديل متوسط التكلفة للسهم</h1>

        <h3>Input from user</h3>
        <label>التكلفة القديمة</label><input type="number" id="oldCost" /><br>
        <label>الكمية القديمة</label><input type="number" id="oldQuantity" /><br><br>
        
        <label>التكلفة الجديدة</label><input type="number" id="newCost" /><br>
        <label>الكمية الجديدة</label><input type="number" id="newQuantity" /><br>
        

        
        
        <h3>Output</h3>
        <button onclick="cacl()">احسب</button><br><br>
        <label>السعر الجديد المعدل: </label><div id="Caclulate"></div>
        
        <h4>note:</h4>
        <p><b>السعر الجديد المعدل = (التكلفة القديمة + التكلفة الجديدة) / (الكمية القديمة + الكمية الجديدة)</b></p>
        
        <!-- JavaScript -->
        
        <script src="main.js"></script>
    </body>
</html>

CSS:

html {
    background: #e6e9e9;
    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
    -webkit-font-smoothing: antialiased;
}

body {
    direction: rtl;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    padding: 2em 2em 4em;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

b, strong {
    font-weight: 600;
}

input {
    margin: 5px;
}

JavaScript:

/*global console, alert, prompt*/



var oldPrice_input = document.getElementById("oldPrice").value,
    oldQuantity_input = document.getElementById("oldQuantity").value,
    oldCost_input = document.getElementById("oldCost").value,
    
    newPrice_input = document.getElementById("newPrice").value,
    newQuantity_input = document.getElementById("newQuantity").value,
    newCost_input = document.getElementById("newCost").value,

    oldPrice_output = oldCost_input / oldQuantity_input,
    newPrice_indep_output = newCost_input / newQuantity_input,
    TotalQuantity_output = oldQuantity_input + newQuantity_input,
    TotalCost_output = oldCost_input + newCost_input,
    newPrice_output = TotalCost_output / TotalQuantity_output;
    
function cacl() {
    "use strict";
    document.getElementById("Caclulate").innerHTML =
        [(document.getElementById("oldCost").value + document.getElementById("newCost").value)] / [(document.getElementById("oldQuantity").value + document.getElementById("newQuantity").value)];
}

نفترض التالي:

التكلفة القديمة = 10

الكمية القديمة = 1

التكلفة الجديدة = 10

الكمية الجديدة = 1

الناتج الصحيح المفترض هو : 10 لكن الذي يظهر هو : 91.81818181818181

فما هي المشكلة؟

علماً بأن المعادلة المستخدمة هي:

السعر الجديد المعدل = (التكلفة القديمة + التكلفة الجديدة) / (الكمية القديمة + الكمية الجديدة)

Hamada Sayed · 9 نوفمبر 2018

السلام عليكم.

قم بتحويل النص الي رقم صحيح قبل إجراء العمليات الحسابيه

iAbdullah95 · 9 نوفمبر 2018

بتاريخ 2 ساعات قال Hamada Sayed:

السلام عليكم.

قم بتحويل النص الي رقم صحيح قبل إجراء العمليات الحسابيه

وعليكم السلام

كيف يمكنني ذلك؟ (مبتدئ)

Hamada Sayed · 9 نوفمبر 2018

استخدم

parseInt

لتحويل النص الي رقم صحيح.

var num=document.getElementById("..."). value

num=parseInt(num);

iAbdullah95 · 9 نوفمبر 2018

بتاريخ منذ ساعة مضت قال Hamada Sayed:

استخدم

parseInt

لتحويل النص الي رقم صحيح.

var num=document.getElementById("..."). value

num=parseInt(num);

لم تعمل معي

/*global console, alert, prompt*/



var oldQuantity_input = document.getElementById("oldQuantity").value,
    oldCost_input = document.getElementById("oldCost").value,


    newQuantity_input = document.getElementById("newQuantity").value,
    newCost_input = document.getElementById("newCost").value,

    
    TotalQuantity_output = oldQuantity_input + newQuantity_input, // إجمالي الكمية
    TotalCost_output = oldCost_input + newCost_input, // إجمالي التكلفة

    newPrice_output = TotalCost_output / TotalQuantity_output, // السعر الجديد المعدل

    textToNum = parseInt(oldQuantity_input, oldCost_input, newQuantity_input, newCost_input, TotalCost_output, TotalQuantity_output, newPrice_output);
    
function cacl() {
    "use strict";
    document.getElementById("Caclulate").innerHTML = newPrice_output;
}

أصبحت النتيجة undefined

تم التعديل في 9 نوفمبر 2018 بواسطة iAbdullah95

Hamada Sayed · 9 نوفمبر 2018

لا أعلم اذا كانت الطريقه parseInt تعمل علي متصفح مايكروسوفت.

iAbdullah95 · 9 نوفمبر 2018

بتاريخ 34 دقائق مضت قال Hamada Sayed:

لا أعلم اذا كانت الطريقه parseInt تعمل علي متصفح مايكروسوفت.

أستخدم Chrome

هذا هو العمل كاملاً:

https://jsfiddle.net/iAbdullah95/Lqwj4d9b/3/

Hamada Sayed · 9 نوفمبر 2018

اذا كانت النتيجه undefined

استخدم stringToNumber

function stringToNumber(str){ str=new String(str+"");

if ("parseInt" in window) return parseInt(str);

var num=0, n=1, i=str.length-1, ch;

for (;i>-1; i--){

ch=str.charAt(i);

if (ch<='9' && ch>='0'){

ch=ch&15;

num=num+(ch*n);

n=n*10;

} else break;

}

return num;

}

مع العلم ان الطريقه stringToNumber يمرر لها وسيط واحد.

iAbdullah95 · 9 نوفمبر 2018

بتاريخ 2 ساعات قال Hamada Sayed:

اذا كانت النتيجه undefined

استخدم stringToNumber

function stringToNumber(str){ str=new String(str+"");

if ("parseInt" in window) return parseInt(str);

var num=0, n=1, i=str.length-1, ch;

for (;i>-1; i--){

ch=str.charAt(i);

if (ch<='9' && ch>='0'){

ch=ch&15;

num=num+(ch*n);

n=n*10;

} else break;

}

return num;

}

مع العلم ان الطريقه stringToNumber يمرر لها وسيط واحد.

هذا الكود صعب جدا، مستواي مبتدئ جدا.

هل يمكنك أن تلقي نظرة على الرابط في ردي السابق؟ وتقوم بإصلاح الخلل ثم سأحاول فهم الطريقة

Hamada Sayed · 9 نوفمبر 2018

الويب سايت فارغ ولا يوجد به شئ مفيد.

iAbdullah95 · 9 نوفمبر 2018

بتاريخ 3 دقائق مضت قال Hamada Sayed:

الويب سايت فارغ ولا يوجد به شئ مفيد.

غريب!

يظهر لي دون مشاكل:

https://jsfiddle.net/iAbdullah95/Lqwj4d9b/3/

هل تستطيع مشاهدة الاكواد على الأقل؟

Hamada Sayed · 9 نوفمبر 2018

استبدل الfunction

function cacl() { "use strict"; document.getElementById("Caclulate").innerHTML = [(document.getElementById("oldCost").value + document.getElementById("newCost").value)] / [(document.getElementById("oldQuantity").value + document.getElementById("newQuantity").value)]; }

بالfunction

function cacl() {
"use strict";
document.getElementById("Caclulate").innerHTML =
(parseInt(document.getElementById("oldCost").value) + parseInt(document.getElementById("newCost").value)) / (parseInt(document.getElementById("oldQuantity").value) + parseInt(document.getElementById("newQuantity").value));
}

وإحرص علي ان لا تكون قيمه المقسوم عليه صفر وإلا ستظهر لك النتيجه infinity

تم التعديل في 9 نوفمبر 2018 بواسطة Hamada Sayed

iAbdullah95 · 10 نوفمبر 2018

بتاريخ On 9‏/11‏/2018 at 20:46 قال Hamada Sayed:

استبدل الfunction

function cacl() { "use strict"; document.getElementById("Caclulate").innerHTML = [(document.getElementById("oldCost").value + document.getElementById("newCost").value)] / [(document.getElementById("oldQuantity").value + document.getElementById("newQuantity").value)]; }

بالfunction

function cacl() {
"use strict";
document.getElementById("Caclulate").innerHTML =
(parseInt(document.getElementById("oldCost").value) + parseInt(document.getElementById("newCost").value)) / (parseInt(document.getElementById("oldQuantity").value) + parseInt(document.getElementById("newQuantity").value));
}

وإحرص علي ان لا تكون قيمه المقسوم عليه صفر وإلا ستظهر لك النتيجه infinity

ممتاز يعمل بشكل رائع الآن، لكن قمت بعدة عمليات لتطوير البرنامج وتوقف وأصبحت النتيجة NaN ! لم أفهم أين الخطأ بالتحديد؟

الكود الجديد هنا

https://jsfiddle.net/iAbdullah95/Lqwj4d9b/6/

تم التعديل في 10 نوفمبر 2018 بواسطة iAbdullah95

Hamada Sayed · 11 نوفمبر 2018

البرنامج محتاج تطوير للتأكد من ان الحقول توجد بها قيم وان القيم ارقام وليست حروف او ارقام وحروف.

والبرنامج قد يعمل معك اذا كانت الارقام تتوسطها حروف او تنهاها.

تم التعديل في 11 نوفمبر 2018 بواسطة Hamada Sayed

سارة محمد2 · 15 ديسمبر 2018

وعليكم السلام،

إن document.getElementById().value تعيد القيمة كstring وبالتالي فإن ما يحصل في حالتك هو جمع للقيم النصية 10+10 =1010

ثم تقسيمها على جمع القيمتين النصيتين 1+1=11

أي يصبح لديك 1010/11= 91.81818181818181

وبالتالي عليك أن تقوم بتحويل كل قيمة نصية إلى عدد وبإمكانك ذلك عن طريق إضافة (+) قبل

document.getElementById().value

أي يصبح كود التابع ()calc لديك بالشكل التالي:

function cacl() {
    "use strict";
    document.getElementById("Caclulate").innerHTML =
        [( +(document.getElementById("oldCost").value )+ +(document.getElementById("newCost").value))] /
        [(+(document.getElementById("oldQuantity").value) + +(document.getElementById("newQuantity").value))];
}

وفي هذه الحالة سيتم جمع 10+10 = 20 ثم تقسيمها على 1+1 =2 وستحصل على الجواب الصحيح 20/2 = 10

إن إشارة (+) تدعى unary plus operator -معامل الزائد الأحادي - وهي توضع قبل القيمة لتحويلها إلى قيمة رقمية وللمزيد يمكنك الاطلاع على الرابط التالي

https://wiki.hsoub.com/JavaScript/Arithmetic_Operators#.D8.A7.D9.84.D8.A8.D9.86.D9.8A.D8.A9_.D8.A7.D9.84.D8.B9.D8.A7.D9.85.D8.A9_9

خطأ في العمليات الحسابية Javascript

السؤال

iAbdullah95

14 أجوبة على هذا السؤال

Recommended Posts

Hamada Sayed

iAbdullah95

Hamada Sayed

iAbdullah95

Hamada Sayed

iAbdullah95

Hamada Sayed

iAbdullah95

Hamada Sayed

iAbdullah95

Hamada Sayed

iAbdullah95

Hamada Sayed

سارة محمد2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية