Hướng dẫn addition of two numbers in html using javascript - cộng hai số trong html bằng javascript

Question

Chúng tôi sử dụng toán tử & nbsp; ____ 12 & nbsp; để thêm hai hoặc nhiều số.

Nội dung chính Show

Ví dụ 1: Thêm hai số
Ví dụ 2: Thêm hai số được nhập bởi người dùng
Tổng quan
Phạm vi của bài viết
Thêm hai số trong JavaScript
Chương trình JavaScript để thêm hai số trong HTML
Chương trình JavaScript để thêm hai số bằng biểu mẫu và hộp văn bản
Nhận đầu vào của người dùng từng cái một
Sự kết luận

Ví dụ 1: Thêm hai số

const num1 = 5;
const num2 = 3;

// add two numbers
const sum = num1 + num2;

// display the sum
console.log('The sum of ' + num1 + ' and ' + num2 + ' is: ' + sum);

Đầu ra

The sum of 5 and 3 is: 8

Ví dụ 2: Thêm hai số được nhập bởi người dùng

// store input numbers
const num1 = parseInt(prompt('Enter the first number '));
const num2 = parseInt(prompt('Enter the second number '));

//add two numbers
const sum = num1 + num2;

// display the sum
console.log(`The sum of ${num1} and ${num2} is ${sum}`);

Đầu ra

Enter the first number 5
Enter the second number 3
The sum of 5 and 3 is: 8

Ví dụ 2: Thêm hai số được nhập bởi người dùng

const num1 = parseInt(prompt('Enter the first number '));
const num2 = parseInt(prompt('Enter the second number '));

Chương trình trên yêu cầu người dùng nhập hai số. Ở đây,

The sum of 5 and 3 is: 8

3 được sử dụng để lấy đầu vào từ người dùng.

The sum of 5 and 3 is: 8

4 được sử dụng để chuyển đổi chuỗi đầu vào của người dùng thành số.

const sum = num1 + num2;

Sau đó, tổng của các số được tính toán.

console.log(`The sum of ${num1} and ${num2} is ${sum}`);

Cuối cùng, tổng được hiển thị. Để hiển thị kết quả, chúng tôi đã sử dụng mẫu theo nghĩa đen

The sum of 5 and 3 is: 8

5. Điều này cho phép chúng tôi bao gồm các biến bên trong chuỗi.

Để bao gồm các biến bên trong

The sum of 5 and 3 is: 8

6, bạn cần sử dụng định dạng
The sum of 5 and 3 is: 8
7.: Template literals was introduced in ES6 and some browsers may not support them. To learn more, visit, JavaScript template literals support.

Tổng quan

Chương trình JavaScript để thêm hai số là một trong những chương trình cơ bản mà mọi người mới bắt đầu gặp phải. Sau khi học các khái niệm cơ bản về JavaScript như các biến và chức năng, việc thêm hai số sẽ là cách tốt nhất để thực hiện chúng. Chúng tôi có thể thêm hai số trong JavaScript bằng cách sử dụng toán tử bổ sung +. Toán tử bổ sung lấy hai toán hạng và trả lại tổng của họ.+. The Addition operator takes two operands and returns their sum.

Phạm vi của bài viết

Bài viết này thảo luận về các chủ đề dưới đây:

Cách thêm hai số bằng JavaScript
Các phương pháp khác nhau để thêm hai số vào JavaScript

Thêm hai số trong JavaScript

Hãy cho chúng tôi xem cách dễ nhất để thêm hai số vào JavaScript


var num1 = 10;
var num2 = 30;
var sum = num1+num2

Hãy cho chúng tôi hiểu mã JavaScript ở trên; Ở đây, chúng tôi đã khởi tạo hai biến, num1 và num2. Chúng tôi đã chỉ định 10 cho Num1 và 30 cho Num2. Bây giờ tổng tuyên bố được khởi tạo bằng num1 + num2 (10 + 30), do đó tổng của hai số 10 và 30 sẽ được gán cho biến tổng. Giá trị 40 sẽ được gán cho biến tổng là hoạt động tổng kết quả.num1 and num2. We assigned 10 to num1 and 30 to num2. Now the statement sum gets initialized with num1+num2 (10 + 30), so the sum of the two numbers 10 and 30 will be assigned to the sum variable. The value 40 will be assigned to the sum variable as a result sum operation.

Hướng dẫn addition of two numbers in html using javascript - cộng hai số trong html bằng javascript

Chương trình JavaScript để thêm hai số trong HTML

Hãy cho chúng tôi xem cách viết mã JavaScript thêm 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 tệp .html.


html>
<html>
   <head>
      <title>Adding two numbers using JavaScript in HTMLtitle>
      <script>
         var num1 = 10;
         var num2 = 40;
         var sum = num1+num2;
         document.write("Sum of two numbers is " + sum);
      script>
   head>
   <body>body>
html>
Đầu ra::
Bây giờ lưu mã trên với phần mở rộng .html. Chuyển đến bất kỳ trình duyệt web nào và mở tệp .html được lưu gần đây. 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..html extension. Go to any web browser and open the recently saved .html file. We could see that the browser displays the sum of two numbers on the screen.
Giải trình : :
Chúng tôi đã lấy hai biến là num1 và num2 và khởi tạo chúng với các giá trị 10 và 40, tương ứng, tổng của hai biến này được lưu trữ trong biến tổng. Kết quả của hoạt động tổng này được hiển thị trong trình duyệt web.num1 and num2 and initialized them with values 10, and 40, respectively, the sum of these two variables is stored in the
sum variable. The result of this sum operation is displayed in the web browser.

Chương trình JavaScript để thêm 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.

The sum of 5 and 3 is: 8

0

Đầ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 để lấy đầu vào của NUM1 và một hộp văn bản khác là để lấy đầu vào của NUM2. 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ố.num1, and another textbox is for taking input of num2. We will provide values of num1, num2 and then click on the add button, which displays the sum of two numbers.

Explanation::

Trong mã trên, chúng tôi đã lấy hai phần tử đầu vào HTML được sử dụng để thu thập các số đầu vào. Hai số này có ID của FirstNumber và SecondNumber, tương ứng (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 các đầu vào.firstnumber and secondnumber, respectively (we will be using these ids at a later stage). We have also taken a button to call the add function after taking the inputs.

Bây giờ chúng tôi đã thực hiện đầu vào và nhấp vào nút Thêm, luồng đi để thêm một hàm được viết trong thẻ tập lệnh, trong thẻ tập lệnh, chúng tôi đã lấy ba biến là num1, num2 và sum.num1, num2, and sum.

Ở đây, Num1 và Num2 sẽ được sử dụng để lưu trữ hai giá trị đầu vào được thực hiện trước đó. Điều thú vị là Line ParseInt (Document.getEuityById ("FirstNumber"). Giá trị) trong JavaScript sẽ giúp chúng tôi nắm giữ FirstNumber, trong dòng trên thay thế FirstNumber bằng SecondNumber sẽ giúp chúng tôi giữ được thứ hai. Đến thời điểm này, chúng tôi đã nhận được hai số đầu vào được lưu trữ thành NUM1, NUM2. Vì vậy, bây giờ chúng tôi sẽ tính tổng bằng cách sử dụng num1+num2num1 and num2 will be used for storing the previously taken two input values. The interesting thing is that the line parseInt(document.getElementById("firstnumber").value) in JavaScript will help us to get hold of firstnumber, In the above line replacing the firstnumber with secondnumber will help us to get hold of secondnumber. By this point, we got our two input numbers stored into num1, num2. So now we will compute the sum using num1+num2

Chúng tôi đã lấy một phần tử HTML chỉ với ID đầu vào = Câu trả lời, 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ức là document.getEuityById ("Trả lời"). Value = sum; Dòng này nắm bắt ID câu trả lời và ghi vào thuộc tính giá trị của nó.input id=”answer”, using this input id we display the sum on the browser, i.e. document.getElementById("answer").value = sum; this line captures the answer id and writes to its value property.

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 cho chương trình JavaScript để thêm hai số.

Phương pháp này trông giống với phương pháp được thảo luận ở trên.

Sự khác biệt lớn cho việc triển khai này là, ở đây người dùng sẽ chỉ đưa ra đầu vào cho một yếu tố tại một thời điểm.

The sum of 5 and 3 is: 8

1

Explanation::

Giống như triển khai trước đó, chúng tôi đã thực hiện hai phần tử đầu vào HTML, nhưng bắt được là chúng tôi sẽ không hiển thị cả hai phần tử đầu vào HTML tại một thời điểm, chúng tôi hiển thị một trường một lần và sau khi đưa ra đầu vào của người dùng và nhấp vào Enter Chúng tôi hiển thị phần tử đầu vào HTML tiếp theo sau đó chúng tôi nhấp vào thêm để tổng của hai số sẽ được hiển thị.

Đố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 kiểu làm 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".p id="blockTwo" we have added style attribute as style="display:none;" this ensures that this field will not be displayed. We have done the same thing with p id="blockThree".

Khi người dùng nhập một số và nhấp vào nút Enter, hàm FirstNum () được gọi và ở đây chúng tôi nhận được 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 đó là sự thật, thì bằng cách sử dụng CSS nội bộ, chúng tôi ẩn trường BlockOne HTML bằng cách đặt Temp.Style.Display = "none"; và hiển thị trường blocktwo html bằng cách đặt temp.style.display = "block".FirstNum() function gets called, and here we get the number by using its id and store it in num1. Now, we check if the number is a true value, if it is true, then by using internal css, we hide the blockOne HTML field by setting temp.style.display = "none"; and display the blockTwo HTML field by setting temp.style.display = "block".

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 được số bằng cách sử dụng ID của nó và lưu trữ nó trong num2.add so that SecondNum() function gets called, and we get the number by using its id and store it in num2.

Trong hàm secondNum (), chúng tôi kiểm tra xem cả num1 và num2 có đúng hay không, nếu cả hai đều đúng thì chúng tôi ẩn thứ hai bằng cách đặt temp.style.display = "none". Bây giờ chúng tôi sẽ tính toán tổng và hiển thị nó trên trình duyệt bằng cách sử dụng blockthree, vì nó được ẩn, chúng tôi sẽ hiển thị nó bằng cách đặt Temp.Style.Display = "Block"; và hiển thị kết quả của Document.getEuityById ("res"). InternalHtml = sum.SecondNum() function, we check if both num1 and num2 are true or not, if both are true then we hide the secondInput by setting temp.style.display = "none". Now we will compute sum and display it on browser by using blockThree, as it was hidden, we will display it by setting temp.style.display = "block"; and display the result by document.getElementById("res").innerHTML = sum.

Ở đây, chúng tôi nhập 7 làm số thứ nhất và sau đó 8 là số thứ hai, do đó nhận được 15 là tổng.

Sự kết luận

Như đã nêu trước đây, việc thêm hai số trong JavaScript là một chương trình mà mọi người mới bắt đầu phải đối mặt vì nó làm rõ nhiều nghi ngờ về cách sử dụng các hàm JavaScript, lưu trữ tổng trong một biến khác.
Chúng tôi sử dụng toán tử bổ sung + để thêm hai số trong JavaScript.+ to add two numbers in JavaScript.
Trong JavaScript, chúng ta có thể sử dụng các phương thức khác nhau để thêm hai số, như sử dụng các hàm JavaScript, biểu mẫu và hộp văn bản.
Trong JavaScript, chúng tôi chỉ có thể lấy một đầu vào từ người dùng tại một thời điểm và thêm chúng để trả về kết quả.

programming javascript JavaScript example

Hướng dẫn addition of two numbers in html using javascript - cộng hai số trong html bằng javascript

Ví dụ 1: Thêm hai số

Ví dụ 2: Thêm hai số được nhập bởi người dùng

Tổng quan

Phạm vi của bài viết

Thêm hai số trong JavaScript

Chương trình JavaScript để thêm hai số trong HTML

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

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

Sự kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội