Cách thêm số trong HTML bằng JavaScript

Tìm Tổng của Hai Số Bằng JavaScript

Thí dụ






Enter the First number : 
Enter the Second number: 
Add



Kết quả

Nhập số đầu tiên.
Nhập số thứ hai.
Thêm

Giải thích mã

  • no=Số[tài liệu. getElementById["đầu tiên"]. value];
    Mã này được sử dụng để nhận trường nhập giá trị đầu tiên của biểu mẫu nhập có id trước.
  • no=Số[tài liệu. getElementById["thứ hai"]. value];
    Mã này được sử dụng để nhận trường nhập biểu mẫu giá trị đầu vào có id thứ hai.
  • tài liệu. getElementById["câu trả lời"]. value= fact;
    Mã này dùng để nhận giá trị đã tính của giai thừa và hiển thị trong trường nhập có câu trả lời id
  • Thêm
    Mã này được sử dụng cho chức năng thêm cuộc gọi khi nhấp vào nút.

Nam châm là giải pháp thay thế Adsense tốt nhất ở đây chúng tôi kiếm được 2 đô la cho một liên kết, Ở đây chúng tôi nhận được các quảng cáo liên kết. magenet

Hãy để chúng tôi hiểu mã JavaScript ở trên; . Chúng tôi đã gán 10 cho num1 và 30 cho num2. Lúc này câu lệnh sum được khởi tạo với num1+num2 [10 + 30] nên tổng của hai số 10 và 30 sẽ được gán cho biến sum. Giá trị 40 sẽ được gán cho biến tổng khi kết quả là phép tính tổng

Chương trình JavaScript để cộng hai số trong HTML

Hãy để chúng tôi xem cách viết mã JavaScript cộng hai số và hiển thị kết quả trong trình duyệt web. Để hiển thị kết quả trong trình duyệt web, chúng tôi viết mã trong một. tệp html



   
      Adding two numbers using JavaScript in HTML
      
   
   

đầu ra

Bây giờ Lưu mã trên với. phần mở rộng html. Truy cập bất kỳ trình duyệt web nào và mở tệp đã lưu gần đây. tệp html. Chúng ta có thể thấy rằng trình duyệt hiển thị tổng của hai số trên màn hình

Giải trình

Chúng ta đã lấy 2 biến là num1 và num2 và khởi tạo cho chúng với các giá trị lần lượt là 10 và 40, tổng của 2 biến này được lưu trong biến sum. Kết quả của phép tính tổng này được hiển thị trong trình duyệt web

Chương trình JavaScript để cộng hai số bằng biểu mẫu và hộp văn bản

Hãy cho chúng tôi xem chương trình JavaScript thực tế cho phép người dùng cung cấp đầu vào bằng Biểu mẫu và Hộp văn bản



   
      
   
   
      

First Number:

Second Number:

Add Them

Sum =

đầu ra

Bây giờ, chúng ta có thể thấy rằng trình duyệt hiển thị hai hộp văn bản trong đó một hộp văn bản dùng để nhập số 1 và hộp văn bản khác dùng để nhập số 2. Chúng tôi sẽ cung cấp các giá trị của num1, num2 và sau đó nhấp vào nút thêm, hiển thị tổng của hai số

Giải trình

Trong đoạn mã trên, chúng tôi đã lấy hai phần tử đầu vào HTML được sử dụng để lấy các số đầu vào. Hai số này có id lần lượt là số thứ nhất và số thứ hai [chúng tôi sẽ sử dụng các id này ở giai đoạn sau]. Chúng tôi cũng đã lấy một nút để gọi chức năng thêm sau khi lấy đầu vào

Bây giờ chúng ta đã nhập dữ liệu đầu vào và nhấp vào nút thêm, quy trình sẽ thêm một hàm được viết trong thẻ script, Trong thẻ script, chúng ta đã lấy ba biến là num1, num2 và sum

Ở đây, num1 và num2 sẽ được sử dụng để lưu trữ hai giá trị đầu vào đã lấy trước đó. Điều thú vị là dòng parseInt[document. getElementById["số đầu tiên"]. value] trong JavaScript sẽ giúp chúng ta nắm giữ số thứ nhất, Ở dòng trên, việc thay thế số thứ nhất bằng số thứ hai sẽ giúp chúng ta nắm giữ số thứ hai. Đến thời điểm này, chúng tôi đã có hai số đầu vào được lưu vào num1, num2. Vì vậy, bây giờ chúng ta sẽ tính tổng bằng cách sử dụng num1+num2

Chúng tôi đã lấy một phần tử HTML chỉ với đầu vào id=”answer”, sử dụng id đầu vào này, chúng tôi hiển thị tổng trên trình duyệt, tôi. e. tài liệu. getElementById["câu trả lời"]. giá trị = tổng;

Nhận đầu vào của người dùng từng cái một

Chúng ta hãy xem xét thêm một phương pháp để Chương trình JavaScript cộng hai số

Phương pháp này trông rất giống với phương pháp đã thảo luận ở trên

Sự khác biệt chính cho việc triển khai này là ở đây, người dùng sẽ chỉ cung cấp đầu vào cho một phần tử tại một thời điểm



   
      
   
   
      

First Number Enter

Second Number Add

Sum =

Giải trình

Giống như lần triển khai trước, chúng tôi đã lấy hai phần tử đầu vào HTML, nhưng điều thú vị là chúng tôi sẽ không hiển thị cả hai phần tử đầu vào HTML cùng một lúc, chúng tôi hiển thị một trường tại một thời điểm và sau khi cung cấp cho người dùng đầu vào và nhấp vào nhập

Đối với phần tử đầu vào HTML thứ hai với p id="blockTwo", chúng tôi đã thêm thuộc tính style là style="display. none;" điều này đảm bảo rằng trường này sẽ không được hiển thị. Chúng tôi đã làm điều tương tự với p id="blockThree"

Khi người dùng nhập một số và nhấp vào nút Enter, hàm FirstNum[] sẽ được gọi và ở đây chúng tôi lấy số bằng cách sử dụng id của nó và lưu trữ nó trong num1. Bây giờ, chúng tôi kiểm tra xem số đó có phải là giá trị thực hay không, nếu đúng thì bằng cách sử dụng css nội bộ, chúng tôi ẩn trường HTML blockOne bằng cách đặt tạm thời. Phong cách. hiển thị = "không"; . Phong cách. hiển thị = "khối"

Bây giờ chúng tôi cung cấp đầu vào cho số thứ hai và nhấp vào thêm để hàm SecondNum[] được gọi và chúng tôi nhận số bằng cách sử dụng id của nó và lưu trữ nó trong num2

Trong hàm SecondNum[], chúng ta kiểm tra xem cả num1 và num2 có đúng hay không, nếu cả hai đều đúng thì chúng ta ẩn secondInput bằng cách đặt temp. Phong cách. hiển thị = "không". Bây giờ chúng tôi sẽ tính tổng và hiển thị nó trên trình duyệt bằng cách sử dụng blockThree, vì nó đã bị ẩn, chúng tôi sẽ hiển thị nó bằng cách đặt tạm thời. Phong cách. hiển thị = "khối"; . getElementById["res"]. bên trongHTML = tổng

Làm cách nào để thêm số bằng JavaScript?

Thêm số trong JavaScript bằng cách đặt dấu cộng giữa chúng . Bạn cũng có thể sử dụng cú pháp sau để thực hiện phép cộng. var x+=y; .

Làm cách nào để thêm hai số trong HTML JavaScript?

Đây là mã JavaScript đơn giản nhất để cộng hai số. .
var numOne = 10;
numOne = parseInt[tài liệu. .
tài liệu. .
phong cách = "hiển thị. không ai;"
nhiệt độ. .

Làm cách nào để thêm giá trị trong JavaScript?

Toán tử gán JavaScript . The Addition Assignment Operator [ += ] adds a value to a variable.

Làm cách nào để thêm số trong DOM JavaScript?

Trong tuyên bố này, chúng tôi đã sử dụng + ở ba vị trí sau với các chức năng sau. .
' Kết quả. ' + [+Số thứ nhất + +Số thứ hai];.
' Kết quả. '+ [ + Số thứ nhất + + Số thứ hai];.
' Kết quả. '+ [+Số thứ nhất + +Số thứ hai];

Chủ Đề