Shape Rule
Continuous k++
Row 1 prints 1, row 2 prints 2 3, row 3 prints 4 5 6, and so on without restarting.
Continuous Number Triangle Pattern in JavaScript
Overview
What You’ll Learn
The continuous number triangle uses a running counter k so digits keep increasing across rows — a natural step after the fill-with-5 pattern in Program 19. This tutorial covers the shape rule, counter logic, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.
Outer Loop
1..rows
for (let i = 1; i <= rows; i++) makes row i print i numbers.
Counter k
k++ each append
line += k + " "; k++ appends k then increments — value carries to the next row.
line += vs console.log()
Same line / next line
Numbers use line += k + " "; k++; end each row with console.log(line).
Live Preview
1–15 rows
Pick a row count and draw the continuous counter triangle instantly in the browser.
O(n²)
Complexity
Total prints = rows(rows+1)/2; extra memory stays O(1).
Introduction
A continuous number triangle prints an ascending counter across rows — numbers never restart at 1 on each new line. With rows = 4, the output is 1, 2 3, 4 5 6, 7 8 9 10.
In JavaScript you declare k = 1 once, print k++ in the inner loop for i iterations per row, then console.log(line) ends each row.
Why it matters?
It introduces a running counter variable — a key step after Program 19 and before jump-number patterns.
Key Highlights
Counter k
Declare k = 1 once before both loops.
k++
Print then increment — sequence continues across rows.
Print Then Break
line += k + " "; k++ in the inner loop; console.log(line) after.
Series Foundation
Follow Program 19; continue to Program 21 (jump number triangle).
In short: set k = 1 once, for each row i print k++ for i numbers, then call console.log(line).
Foundation
📝 Problem & Approach
Given a positive integer rows, print a continuous number triangle: row i prints i numbers from a running counter k that starts at 1 and increments with k++ on every print.
JavaScript
// rows = 4 (conceptual shape)
// 1
// 2 3
// 4 5 6
// 7 8 9 10
let k = 1;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += k + " ";
k++;
}
console.log(line);
}Inputs & Outputs
| Item | Type | Description |
|---|---|---|
rows | int | Number of triangle lines to print (typically ≥ 1). |
k | int | Running counter — declared once, incremented each print. |
| Printed output | text | Row i has i spaced numbers — continuous sequence. |
Minimal workflow
Pseudocode
let k = 1
for i from 1 to rows:
line = ""
for j from 1 to i:
append k + " " to line, then k++
console.log(line)Approach comparison
| Approach | Idea | Best for |
|---|---|---|
| Running counter k++ | 1, 2 3, 4 5 6, … | Learning and interviews |
| User-input rows | parseInt(prompt(...)) | Flexible console programs |
| Custom start k | k = 10 before loops | Shift the whole sequence |
Cheat Sheet
⚡ Quick Reference
| Goal | Pattern |
|---|---|
| Walk each row | for (let i = 1; i <= rows; i++) |
| Init counter | k = 1 before both loops |
| Print and step | line += k + " "; k++ |
| End the row | console.log(line) |
| Custom start | k = 10 to shift sequence |
| User input | rows = parseInt(prompt(...)) |
Compare
📋 k++ vs Custom Start vs User Input
Same continuous triangle — different ways to control the counter.
k++
counterPrint k then increment — sequence continues
Declare once
k = 1Before both loops — not inside outer loop
Custom k
k = 10Shift start value in Example 3
Learning tip
no resetDo not reset k each row for continuous output
Context
When This Pattern Shows Up
Reach for this pattern when teaching running counters and continuous sequences inside nested loops.
First lab exercise
Natural follow-up after Program 19 — introduces a single running counter.
Nested-loop warm-up
Outer/inner bound practice with an immediate visual check.
Console I/O practice
Combine loops with
prompt()for a flexible row count.Gateway to variants
Compare Program 19 (fill-with-5) and Program 21 (jump number triangle) next.
Not a UI layout tool
This is a console teaching pattern — not how you build modern app screens.
Key benefit: one small program that locks in nested loops, output sequencing, and O(n²) thinking.
Interactive
🔮 Live Preview
Choose a row count between 1 and 15 and draw the continuous number triangle in the browser.
Hands-On
Examples Gallery
Three complete JavaScript programs — fixed row count, user input, and custom start value for k. Click View Output to reveal sample results, or Try it Yourself to run the code live.
📚 Getting Started
Print four rows of the continuous counter triangle with k++.
Example 1 — Fixed rows = 4
Hard-coded height — ideal for first demos and screenshots.
JavaScript
const rows = 4;
let k = 1;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += k + " ";
k++;
}
console.log(line);
}How It Works
When i = 1, k appends once as 1. When i = 2, k appends 2 then 3. When i = 4, k runs from 7 to 10 — the counter never resets. console.log(line) after the inner loop starts the next row.
📈 User Input
Read the row count with prompt() instead of hard-coding 4.
Example 2 — User Input
Read rows with prompt() and parseInt(); k still starts at 1.
JavaScript
const rowsInput = prompt("Enter the number of rows:");
const rows = parseInt(rowsInput, 10);
let k = 1;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += k + " ";
k++;
}
console.log(line);
}How It Works
Same nested-loop core as Example 1; only the source of rows changes. k is still declared once before the loops. Non-numeric input yields NaN with bare parseInt(prompt()) — validate with Number.isFinite for safer labs.
⚡ Custom Start
Start the counter from a value other than 1.
Example 3 — Custom Start k = 10
Shift the whole sequence by starting k at 10 instead of 1.
JavaScript
const rows = 4;
let k = 10;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += k + " ";
k++;
}
console.log(line);
}How It Works
Change only the initial value of k — the inner loop and k++ logic stay the same. The sequence continues from 10 instead of 1.
🧠 How the Algorithm Prints Rows
1
Set up
console.log is built in; use prompt() when reading input. Set rows and let k = 1.
Setup
2
Outer loop (row width)
for (let i = 1; i <= rows; i++) makes row i print i numbers.
Row
3
Inner loop + k++
line += k + " "; k++ prints k then increments — value carries to the next row.
Sequence
4
New line
console.log(line) ends the row so the next outer iteration starts fresh.
Break
=
Continuous triangle complete
Total prints: rows(rows+1)/2 — O(n²) time, O(1) extra memory.
Trace
🔎 Worked Walkthrough — rows = 4
Trace each outer-loop value of i, the starting k, and the numbers printed on each row.
i | Start k | Numbers printed | Row output |
|---|---|---|---|
1 | 1 | 1 | 1 |
2 | 2 | 2, 3 | 2 3 |
3 | 4 | 4, 5, 6 | 4 5 6 |
4 | 7 | 7, 8, 9, 10 | 7 8 9 10 |
Total number prints: 1 + 2 + 3 + 4 = 10 = 4×5/2.
Use Cases
Where this tiny pattern (and its loop structure) shows up beyond the homework prompt.
1. Teaching Nested Loops
Clearest visual proof that outer and inner bounds interact.
Example: change j <= i and watch the shape change.
2. Pattern Series Base
Foundation for inverted, pyramid, diamond, and hollow variants.
Example: use (i + j) % 2 for row+column parity grids.
3. Console Formatting Drills
Practice line += k + " " vs console.log(line) without complex math.
Example: put console.log(line) inside the inner loop by mistake.
4. Character Substitution
Swap digits for letters, stars, or spaced output once the loop works.
Example: use line += k + " " for spaced numbers on each row.
5. Complexity Intuition
Triangular totals make O(n²) concrete for beginners.
Example: count printed digits for n = 10 still → 55.
6. Input Validation Labs
Pair the pattern with Number.isFinite checks around parseInt(prompt()) and positive-row checks.
Example: reject rows <= 0 and re-prompt.
Pro Tip: when an interviewer asks for patterns, explain the outer/inner roles first — then write the loops. The story matters as much as the code.
Advantages
Why this pattern earns a permanent spot in beginner JavaScript courses.
1. Instant Visual Feedback
Wrong bounds show up immediately as a broken staircase.
2. Minimal Concepts
Only loops and console output — no arrays or math libraries.
3. Easy to Extend
Invert, center, hollow, or change the fill character with small edits.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters.
Pro Tip: learn k = 1 before the loops first; compare with custom start in Example 3.
Usage Tips
Small habits that keep number-pattern code clean.
1. Name Bounds Clearly
Declare
konce before both loops — not inside the outer loop.2. Validate with
Number.isFiniteCheck
parseInt(prompt())withNumber.isFiniteso bad input does not leaverowsasNaN.3. Keep console.log Outside
Only call
console.log(line)after the inner loop finishes the row.4. Trace k on Paper
Write row
i, startk, and eachk++step before coding.5. Dry-Run One Small n
Trace
rows = 4on paper before coding larger demos.
Pro Tip: if the output is a vertical list of single digits per line, you almost certainly put console.log(line) inside the inner loop.
Common Pitfalls
Mistakes that commonly break continuous number patterns.
1. Newline Inside the Inner Loop
Each digit lands on its own line — you get a column, not a triangle.
→ Use
line += k + " "; k++;console.log(line)only after the inner loop.2. Declaring k Inside the Outer Loop
kresets each row and the sequence restarts at 1.→ Assign
k = 1once before both loops.3. Incrementing k in the Wrong Place
Incrementing after the row newline (or skipping
k++) skips or duplicates numbers.→ Print
kthenk++inside the inner loop.4. Forgetting the Row Break
Omitting
console.log(line)glues every number onto one endless line.→ Always end the row after the inner loop.
5. Blind parseInt(prompt())
Letters or empty input yield
NaNwith bareparseInt(prompt()).→ Validate with
Number.isFiniteand re-prompt on failure.
Edge Cases
Check these inputs before calling the solution done.
rows = 1
Single digit
Output is just 1 on one line.
rows = 0
Empty pattern
Outer loop never runs — print nothing or show a message.
Negative
rows < 0
Treat as invalid; re-prompt instead of silent empty output.
Large n
Large width
Output grows as n² characters — fine for labs, noisy for huge n.
Bad input
Non-numeric input
parseInt(prompt()) yields NaN — validate with Number.isFinite first.
k inside loop
k resets each row
Declaring k inside the outer loop restarts the sequence — not continuous.
No reset
Forgot k++
Without k++, the same number prints repeatedly on each row.
Drill
🎯 Practice Problems
Try these variations to lock in the pattern.
1. Fill-with-5 triangle
- Two inner loops with sequence + padding
- Review Program 19
2. Jump number triangle
- Decreasing step variable per row
- Continue with Program 21
3. Reset k each row
- Declare
kinside outer loop - Compare output — rows restart at 1
4. No trailing space
- Print space only between numbers, not after the last
- Harder follow-up after this page
Important
Notes
- Triangular sum. Total prints =
rows(rows+1)/2— O(n²) fornrows. line += k + " "; k++stays on the line;console.log(line)advances — mix them carefully.- Validate
rows > 0for interactive programs;rows = 1should print a single1. - This page is left-aligned. Centered pyramids need leading spaces — covered later in the series.
Quick Takeaway: declare k = 1 once, print k++ for i numbers per row, then break the line.
Analysis
⏱️ Time and Space Complexity
| Program | Time | Extra space |
|---|---|---|
| Nested loops (Examples 1–2) | O(rows²) | O(1) |
| Custom start (Example 3) | O(rows²) | O(1) |
🎉 Conclusion
The continuous number triangle is a compact lesson in running counters: declare k once, print k++ in the inner loop, and let the sequence continue across rows. Master the fixed-rows version, then try user input and a custom start value.
Practice the three examples above, then continue to Program 21 for the jump number triangle.
Keep k outside the outer loop — use line += k + " "; k++ inside the inner loop and validate rows when reading input.
Pro Tips
💡 Best Practices
✅ Do
- Explain
k = 1before both loops - Use
line += k + " "; k++in the inner loop - Validate
rows ≥ 1for interactive programs - Validate
parseInt(prompt())withNumber.isFinitebefore usingrows - State O(n²) time when asked about complexity
❌ Don’t
- Call
console.log(line)inside the inner digit loop - Declare
kinside the outer loop - Forget
k++after each print - Skip the newline after each row
- Ignore bad console input in user-facing demos
- Skip the
rows = 1edge case
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about this continuous pattern
Print the pattern the beginner-friendly way.
5
Core concepts 01
Rule
k++ continuous
Definition 02
Declare k
Once before loops
Code 03
k++
Print then increment
Code 04
Grow width
Row i prints i nums
Shape 05
Complexity
O(n²) time
Analysis❓ Frequently Asked Questions
Because k is assigned once (let k = 1) before the loops and incremented with k++ every time a number is appended — its value carries over to the next row.
Row 1 prints 1, so k becomes 2. Row 2 appends k twice: 2, then 3 after k++.
k resets each row and the sequence restarts at 1 — you get a growing triangle, not a continuous counter.
line += k + " " stays on the same row with a trailing space. console.log(line) prints the completed row and adds a newline. Numbers use += inside the inner loop; the row break uses console.log after the inner loop.
Total prints are 1+2+...+n = n(n+1)/2.
Yes. Set k = 10 (or any value) before the loops — the sequence continues from that start (see Example 3).
O(n²) for n rows because total digit prints equal n(n+1)/2.
Use parseInt with Number.isFinite and a rows > 0 check after prompt(), or validate the raw string before converting so bad input does not produce NaN.
The outer loop never runs, so nothing is printed. Validate and prompt again if you want a clear user message.
Did you Know? 🔊
A single counter k starts at 1 and increments with k++ on every append — numbers continue across rows instead of restarting. Total prints still equal n(n+1)/2 for n rows.
Continue to Program 21
Move on to the jump number triangle in the JavaScript number-pattern series.
About the author
12 people found this page helpful