جاوااسکریپت - اضافه کردن دو عدد آنها را به هم متصل میکند به جای اینکه جمع آنها را محاسبه کند

من دو عدد را جمع میکنم، اما مقدار صحیحی به دست نمیآورم.

برای مثال، اجرای 1 + 2 نتیجه 12 را برمیگرداند و نه 3

در این کد چه کار اشتباهی انجام میدهم؟

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}

<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>

پاسخ شماره ۱

آنها در واقع رشته هستند، نه عدد. سادهترین روش برای تولید یک عدد از یک رشته این است که آن را با + پیشوند کنید:

var x = +y + +z;

پاسخ شماره ۲

من فقط از Number() استفاده میکنم:

var i = "2";  
var j = "3";  
var k = Number(i) + Number(j); // 5  

پاسخ شماره ۳

شما نیاز دارید از متد parseInt() جاوااسکریپت استفاده کنید تا رشتهها را دوباره به عدد تبدیل کنید. در حال حاضر آنها رشته هستند، بنابراین اضافه کردن دو رشته آنها را به هم متصل میکند، به همین دلیل است که شما "12" را دریافت میکنید.

پاسخ شماره ۴

از parseInt(...) استفاده کنید اما مطمئن شوید که یک مقدار رادیکس مشخص میکنید؛ در غیر این صورت با چندین باگ مواجه خواهید شد (اگر رشته با "0" شروع شود، رادیکس هشتتایی/8 و غیره خواهد بود).

var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);

alert(x + y);

امیدوارم این کمک کند!

پاسخ شماره ۵

موارد زیر ممکن است از نظر کلی مفید باشند.

• ابتدا، فیلدهای فرم HTML محدود به متن هستند. این مخصوصاً به جعبههای متن اعمال میشود، حتی اگر تمام تلاش خود را کرده باشید تا مقدار شبیه عدد به نظر برسد.

• ثانیاً، جاوااسکریپت، چه به طرز مثبت و چه منفی، عملگر + را با دو معنی بارگذاری کرده است: اعداد را جمع میکند و رشتهها را به هم میچسباند. این زبان تمایل به چسباندن دارد، بنابراین حتی عبارتی مانند 3+'4' به عنوان چسباندن در نظر گرفته میشود.

• سوم، جاوااسکریپت تلاش میکند تا نوعها را بهطور پویا تغییر دهد اگر بتواند و اگر نیاز داشته باشد. برای مثال '2'*'3' هر دو نوع را به عدد تبدیل میکند، چون نمیتوان رشتهها را ضرب کرد. اگر یکی از آنها ناسازگار باشد، NaN دریافت خواهید کرد، نه یک عدد.

مشکل شما به این دلیل رخ میدهد که دادههای دریافتی از فرم به عنوان رشته در نظر گرفته میشوند و بنابراین + به جای جمع کردن، رشتهها را به هم متصل میکند.

هنگام خواندن دادههای ظاهراً عددی از یک فرم، شما باید همیشه آن را از طریق parseInt() یا parseFloat() عبور دهید، بسته به اینکه میخواهید یک عدد صحیح یا یک عدد اعشاری داشته باشید.

توجه داشته باشید که هیچ یک از این توابع واقعاً یک رشته را به عدد تبدیل نمیکند. در عوض، رشته را از چپ به راست پردازش میکند تا به یک کاراکتر عددی نامعتبر یا پایان رشته برسد و آنچه مورد قبول واقع شده است را تبدیل میکند. در مورد parseFloat، این شامل یک نقطه اعشاری میشود، اما نه دو نقطه.

هر چیزی پس از عدد معتبر به سادگی نادیده گرفته میشود. هر دو ناموفق خواهند بود اگر رشته حتی با یک عدد شروع نشود. در این صورت شما NaN دریافت خواهید کرد.

یک تکنیک عمومی خوب برای اعداد از فرمها چیزی شبیه به این است:

var data=parseInt(form.elements['data'].value); //  or parseFloat

اگر آماده هستید یک رشته نامعتبر را به ۰ تبدیل کنید، میتوانید استفاده کنید:

var data=parseInt(form.elements['data'].value) || 0;