Trong hướng dẫn này, hãy tìm hiểu cách tìm tổng các số bằng vòng lặp for trong JavaScript. Đó là một giải pháp rất đơn giản, vì vậy hãy nhanh chóng xem xét nó

Tổng các số trong một phạm vi bằng cách sử dụng vòng lặp for

Để bắt đầu, chúng ta sẽ tạo trang HTML của mình. Chúng ta sẽ có thẻ h1 hiển thị tiêu đề

Tôi muốn nhận đầu vào của người dùng cho phạm vi. Sau đó, chúng ta có thể tính tổng các số từ 1 đến phạm vi đó. Chúng ta cũng có thể làm tương tự với một dãy số. Hãy nhìn vào điều đó tiếp theo

Bây giờ, với ví dụ này, hãy tạo một hộp nhập id 'phạm vi'

Sau đó, chúng ta cần một nút id 'nút'. Khi người dùng nhấn vào nút này, tổng của các số đã cho sẽ được hiển thị trong phần tử div mà chúng ta tạo ngay sau đó. Phần tử div này sẽ có id là 'đầu ra'

Chúng ta sẽ thao tác với phần tử div này để hiển thị tổng các số ngay sau khi người dùng nhấn nút

    
Sum of numbers
    Enter the number: 
    Enter
    

Bây giờ, hãy lấy phần tử phạm vi, nút và div theo id của chúng và đặt chúng vào hằng số. Chúng tôi đang đặt các phần tử này trong các hằng số chứ không phải các biến vì chúng tôi sẽ không gán lại các giá trị này trong chương trình này

Hãy cũng tạo các biến 'r' và 'sum' và gán cho chúng các giá trị tương ứng là 0. 'r' sẽ chứa phạm vi do người dùng chỉ định và 'sum' sẽ chứa tổng các số

const range = document.getElementById('range');
const button = document.getElementById('button');
const output = document.getElementById('output');

let r = 0, sum = 0;

Bây giờ, hãy thêm một trình xử lý sự kiện nhấp chuột mới vào phần tử 'nút'. Hãy tạo một chức năng mũi tên ẩn danh xác định điều gì sẽ xảy ra khi nút được nhấp vào

button.addEventListener('click',() => {

Để bắt đầu, chúng ta cần trích xuất giá trị trong phần tử 'phạm vi'. Vì chúng ta đã tạo kiểu nhập văn bản, hãy sử dụng phương thức parseInt để chuyển đổi văn bản thành số

    r = parseInt(range.value,10);

Sau đó, hãy tạo một vòng lặp for lặp từ 1 đến r. Đối với mỗi lần lặp lại, hãy thêm giá trị hiện tại của 'i', bắt đầu từ 1, vào biến 'sum'

Chúng tôi sẽ sử dụng '+=' để thêm giá trị mới của 'i' vào giá trị cũ của 'sum'. Bây giờ bạn đã hiểu vì sao chúng ta khai báo ‘sum’ với giá trị 0. Chúng tôi đã làm điều đó để chúng tôi có một số, mặc dù một số không có giá trị, có thể được thêm vào giá trị đầu tiên của 'i'

    for(let i=1; i<=r; i++) {
        sum += i;
    }

Sau khi hoàn thành vòng lặp for, chúng ta có thể in nó ra trang của mình bằng cách thay đổi nội dung của biến 'đầu ra'

Chúng ta cũng hãy đặt lại giá trị của phần tử 'phạm vi' của chúng ta thành một chuỗi trống và gán lại giá trị 0 cho biến 'tổng' của chúng ta

Toàn bộ chức năng như sau

button.addEventListener('click',() => {
    r = parseInt(range.value,10);
    for(let i=1; i<=r; i++) {
        sum += i;
    }
    output.innerText = `Sum of numbers from 1 to ${r} is ${sum}`;
    range.value = '';
    sum = 0;
});

Đó là nó. Bây giờ, hãy chạy chương trình và xem đầu ra

Trước khi người dùng vào phạm vi và nhấn nút, đây là những gì họ nhìn thấy

Hãy nhập 100 và nhấn 'Enter', và chúng ta sẽ nhận được

Yup, đó là câu trả lời chính xác

Tìm tổng của dãy số

Bây giờ, hãy thử làm tương tự với một dãy số. Chúng tôi sẽ phải xóa hộp nhập liệu của mình cho ví dụ này, vì chúng tôi không cần nhận đầu vào của người dùng ngay bây giờ. Hãy để chúng tôi giữ lại nút và phần tử div sẽ hiển thị đầu ra

    
Sum of array of numbers
    Find sum
    

Tiếp theo, hãy làm việc với tệp script của chúng tôi. Hãy tạo một mảng các số ngẫu nhiên, giống như bên dưới

let arr = [1,5,3,76,46,90,57,0,100,29];

Then, let’s retrieve the 2 elements, and create a variable ‘sum’ that’s assigned to 0 to start with. 

const button = document.getElementById('button');
const output = document.getElementById('output');

let sum = 0;

Cuối cùng, hãy tạo trình xử lý sự kiện nhấp chuột sẽ tìm tổng của mảng. Không giống như ví dụ trước, vì chúng tôi đang xử lý một mảng số ở đây, chúng tôi cần lặp qua độ dài của mảng đó

Vì vậy, hãy tạo một vòng lặp for lặp từ 0 đến ngay trước độ dài của mảng, có thể tìm thấy với mảng. thuộc tính chiều dài

Đối với mỗi lần lặp lại, hãy thêm giá trị hiện tại của 'sum' vào phần tử ở vị trí 'ith' của mảng. Khi kết thúc vòng lặp, chúng ta sẽ có tổng của tất cả các số trong mảng, chính xác như những gì chúng ta muốn

Hãy cập nhật nội dung bên trong của phần tử 'đầu ra' và kết thúc chương trình

Khi bạn chạy các dòng mã trên, bạn sẽ thấy

của bạn đi. Đây là cách bạn có thể tìm tổng của các số bằng cách sử dụng vòng lặp for, có thể là trong một phạm vi hoặc trong một mảng