Đọc các số từ đầu vào có JavaScript luôn trả về NaN

Question

Tôi muốn tạo một máy tính chỉ cần tổng cộng 2 trường. Nhưng bất cứ điều gì tôi thử nó không hoạt động. Nó cũng trả về "NaN", còn nếu tôi sử dụng parseInt().

Dưới đây là các mã:

<script type="text/javascript" language="Javascript"> 
function doSum() 
{ 
var a = document.getElementsByName("a").value; 
var b = document.getElementsByName("b").value; 

var sum = a + b; 

document.getElementById("sum").value = sum; 
} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input type="text" name="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input type="text" name="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

Xin lỗi vì câu hỏi đó Noob, nhưng những gì I'am làm sai? Cảm ơn bạn đã giúp đỡ!

Answer 1

Cho id s đến đầu vào của bạn và xác định liệu duy nhất sử dụng document.getElementById. Sau đó, lấy giá trị int thập phân của chúng bằng cách sử dụng parseInt với radix parameter đặt thành 10 và hiển thị kết quả như bạn hiện đang làm.

<script type="text/javascript" language="Javascript"> 
function doSum() 
{ 
    var a = parseInt(document.getElementById("a").value, 10); 
    var b = parseInt(document.getElementById("b").value, 10); 

    var sum = a + b; 

    document.getElementById("sum").value = sum; 
} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input type="text" id="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input type="text" id="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

getElementsByName trả về một danh sách các yếu tố và bạn phải tham khảo một trong những bạn muốn thông qua một chỉ số, thậm chí nếu danh sách chứa chỉ có một phần tử. Mặt khác,

getElementById trả về một phần tử được xác định duy nhất, theo id của nó.

Answer 2

sử dụng getElementById và cấp cho từng Id đó. getElementsByName trả về một mảng. Nhân tiện .. nó không phải là một câu hỏi tồi. Đó là một lỗi phổ biến - một lỗi được giải quyết theo cách bằng cách sử dụng jQuery có giao dịch trong các gói được bao bọc.

Answer 3

Fields trong JavaScript đều chuỗi bạn cần int, cũng .getElementsByName trả về một mảng, bạn có thể cần các yếu tố đầu tiên, vì vậy:

var a = parseInt(document.getElementsByName("a")[0].value, 10); 
var b = parseInt(document.getElementsByName("b")[0].value, 10); 

Answer 4

a và b là các chuỗi như vậy:

function doSum() 
{ 
var a = parseInt(document.getElementsByName("a").value); 
var b = parseInt(document.getElementsByName("b").value); 

var sum = a + b; 

document.getElementById("sum").value = sum; 
} 

Answer 5

getElementsByName trả về nhiều phần tử, do đó số nhiều Elements. Bạn cần phải nhận được tài sản của các yếu tố đầu tiên được tìm thấy:

var a = document.getElementsByName('a')[0].value; 

getElementsByName trả về một NodeList: đây là một tập hợp của tất cả các yếu tố tìm thấy với tên đó. Nó giống như một mảng trong đó bạn có thể sử dụng các chỉ mục số (như [0]) để truy cập vào các phần tử được tìm thấy và trong đó có một thuộc tính length; không có chức năng giống như mảng nào khác.

---

Ngoài ra, thuộc tính value sẽ luôn là chuỗi nếu được đặt. Toán tử + là toán tử cộng thêm khi các giá trị là số; nếu chúng là chuỗi, nó là toán tử nối. "1" + "2" bằng "12" bằng Javascript. Bạn cần phải sử dụng parseInt để chuyển đổi chúng sang số:

var a = document.getElementsByName('a')[0].value; 
a = parseInt(a, 10); // parse as a number in base 10 

Answer 6

getElementsByTagName trả về một node list:

function doSum() 
{ 
    var a = document.getElementsByName("a")[0].value; 
    var b = document.getElementsByName("b")[0].value; 

    var sum = parseInt(a, 10) + parseInt(b, 10); 

    document.getElementById("sum").value = sum; 
} 

Vì vậy, bạn sẽ cần phải index nó. Ngoài ra để không làm một chuỗi concate, parseInt with radix 10 là cần thiết. Trừ khi bạn có kế hoạch chấp nhận các giá trị bát phân trong máy tính của bạn.

Answer 7

getElementsByName trả về một mảng cung cấp cho bạn loại dữ liệu sai cho những gì bạn đang cố gắng làm.

thử:

function doSum() 
{ 
    var a = document.getElementById("a").value; 
    var b = document.getElementById("b").value; 

    var sum = a + b; 

    document.getElementById("sum").value = sum; 

} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input id="a" type="text" name="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input id="b" type="text" name="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

Answer 8

OK, hai vấn đề, bạn tìm nạp valurs a và b bằng cách sử dụng getElementsByName trả về một mảng giá trị (vì có thể có nhiều giá trị). Sử dụng getElementsById và đặt id trong HTML.

Ngoài ra, thuộc tính giá trị sẽ là chuỗi nên bạn sẽ cần chuyển đổi thành số trước khi thực hiện thêm.