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

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

iAbdullah95

السؤال

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

السلام عليكم

 

قمت بتصميم أداة تقوم بعمل حسابات رياضية بسيطة جداً لكن النواتج تظهر بشكل خاطئ في حال تجاوزت الرقم 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

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

 

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

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

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

Recommended Posts

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

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

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

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

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

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

  • 0
بتاريخ منذ ساعة مضت قال 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

تم التعديل في بواسطة iAbdullah95
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

أستخدم Chrome

 

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

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

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

  • 0

اذا كانت النتيجه 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 يمرر لها وسيط واحد.

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

  • 0
بتاريخ 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 يمرر لها وسيط واحد.

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

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

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

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

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

غريب!

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

 

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

 

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

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

  • 0

استبدل ال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

تم التعديل في بواسطة Hamada Sayed
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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/

تم التعديل في بواسطة iAbdullah95
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

تم التعديل في بواسطة Hamada Sayed
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

إن 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

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...