2016-03-04 13 views
9

Tôi mới để javascript, tôi đang cố gắng học cách chức năng vv trong JS và cố gắng thêm 2 sốloại đầu vào HTML = "number" vẫn trả về một chuỗi khi truy cập từ javascript

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>JS ADD</title> 
 
</head> 
 

 
<body> 
 

 
    <h1>Funcitons is JS</h1> 
 

 

 
    <input type="number" id="num1"> 
 
    <input type="number" id="num2"> 
 

 
    <button type="button" onclick="addNumAction()"> 
 
    Add 
 
    </button> 
 

 
    <script> 
 
    function addNum(n1, n2) { 
 
     return parseInt(n1) + parseInt(n2); 
 
    } 
 

 
    function addNumAction() { 
 
     var n1 = document.getElementById("num1").value; 
 
     var n2 = document.getElementById("num2").value; 
 

 
     var sum = addNum(n1, n2); 
 
     window.alert("" + sum); 
 

 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

Nếu tôi loại bỏ giá trị parseInt() giá trị được coi là chỉ một chuỗi, thì điểm của việc sử dụng <input type="number"> là gì? Vui lòng giải thích cho tôi. trường nào để sử dụng để nhận dữ liệu nhập dưới dạng số?

+0

https://www.w3.org/TR/html5/forms.html#number-state-(type=number) - xem thông số –

+0

không có gì bạn có thể làm. Phần tử HTML Input được ghi lại để trả về giá trị trong kiểu chuỗi biểu diễn số. Xem giải thích của tôi dưới đây. – secretgenes

Trả lời

12

Thông thường bạn nhận được một chuỗi.

Mục đích của loại số là trình duyệt di động sử dụng điều này để hiển thị bàn phím phù hợp và một số trình duyệt sử dụng mục đích này cho mục đích xác thực. Ví dụ: loại email sẽ hiển thị bàn phím với @ và '.' trên bàn phím và number sẽ hiển thị bàn phím số.

+0

Có cách nào để nhận dữ liệu đầu vào dưới dạng số có thể được sử dụng như kiểu dữ liệu số javascript hoặc đang nhận dưới dạng chuỗi và chuyển đổi cách tiêu chuẩn để thực hiện việc này không? –

+1

Bạn sẽ phải sử dụng parseInt trong trường hợp này. –

+0

Nếu điều đó trả lời câu hỏi của bạn, bạn có phiền chấp nhận câu trả lời không? –

1

tl; dr bạn đang làm mọi thứ chính xác, chỉ cần tiếp tục sử dụng parseInt.

type = "number" cho trình duyệt biết rằng người dùng chỉ được phép nhập các ký tự số nhưng sâu xuống, nó vẫn là trường văn bản.

1

type="number" chỉ để xác thực trình duyệt. Nhưng bạn nhận được một chuỗi. Và bạn có thể sử dụng parseInt(num1) hoặc + trước chuỗi.

function addNum(n1, n2) { 
    return +(n1) + +(n2); 
} 
+0

'parseInt (num1)' mà không xác định một gốc là định nghĩa yêu cầu sự cố. Đối với các số thập phân, sử dụng 'parseInt (num1, 10)' - hoặc chỉ cần đưa chuỗi vào một số có dấu cộng. –

+0

"Cơ số" là gì và tại sao nó yêu cầu sự cố? – JCLaHoot

3
  1. phần tử HTML Input là tài liệu để trở về chuỗi đại diện cho một số. Xem tài liệu ở đây: Documentation of HTML Input

  2. Khi bạn thiết lập input type = "number" thì những lĩnh vực đầu vào không chấp nhận đầu vào không phải là số, nhưng đồng thời nó không làm cho kiểu giá trị đầu vào "số" . Lý do là số đầu vào chứa các chữ số như một tập con của các ký tự hợp lệ, nhưng chúng cũng chứa các ký tự hoàn toàn không phải là số, như dấu cách, dấu gạch nối và dấu ngoặc đơn.

5

Cả HTML lẫn HTTP đều không có khái niệm về kiểu dữ liệu (có thể vì chúng không phải là ngôn ngữ lập trình để bắt đầu) và mọi thứ đều là một chuỗi. Khi bạn sử dụng ngôn ngữ khác để tiếp cận thông tin đó đôi khi bạn có thể nhận được một số tiền là ma thuật làm tính năng (ví dụ: PHP sẽ tạo mảng từ các trường GET/POST đã ghép nối các dấu ngoặc vuông trên tên của chúng). ngôn ngữ khác.

Trong trường hợp này, .value thuộc về API DOM và API đó có types. Nhưng hãy xem nó được định nghĩa như thế nào. Thẻ <input> được đại diện bởi các HTMLInputElement interfacevalue tài sản là của type DOMString:

DOMString là UTF-16 String. Vì JavaScript đã sử dụng các chuỗi như vậy, DOMString được ánh xạ trực tiếp đến một số Chuỗi.

Nói cách khác, type="number" là một gợi ý để triển khai xác thực phía máy khách và điều khiển GUI thích hợp nhưng phần tử cơ bản vẫn sẽ lưu trữ chuỗi.

Numeric keyboard screen-shot

0

Bạn có thể sử dụng valueAsNumber (được mô tả trên trang đó) để lấy giá trị số thực tế. Vì vậy, mã của bạn sẽ là:

function addNum(n1, n2) { 
    return n1 + n2; 
} 

function addNumAction() { 
    var n1 = document.getElementById("num1").valueAsNumber; 
    var n2 = document.getElementById("num2").valueAsNumber; 

    var sum = addNum(n1, n2); 
    window.alert("" + sum); 

} 
Các vấn đề liên quan