How to loop numbers and alphabets

Looping in Javascript refers to the process of executing a block of code repeatedly until a certain condition is met. There are several ways to implement loops in JavaScript, but the most common ones are the "for" loop, the "while" loop, and the "do-while" loop.

A "for" loop is used when you know the number of times you want to execute a block of code. Below is the general syntax of a for loop:

for (initialization; condition; iteration) {
  // code to be executed
}
//Example
for (let i=0; i < 10; i++) {
  console.log(i)
}

In this lesson, I'm going to be using the "for" loop, the for loop method is easy to use and it is the commonly used loop method.

In this lesson, you will be taught how to push numbers or alphabets to buttons, you don't have to create different buttons for the numbers or alphabets. For example, creating 10 buttons for 10 digits (0,1,2,3,4,5,6,7,8,9) or creating 26 buttons for 26 alphabets just as below:

<html>
<head>
<title>Creating Buttons</title>
</head>
<body>
    <div>
        <button>0</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
    </div>
</body>
</html>

That's kind of stressful, right? And while passing a function you still have to pass the function in the button one after the other which is stressful and it is not professional. Now, I'm going to teach you an easy way to do this by looping the digits or alphabets across a button and the digits or alphabets are going to be labeled on different buttons of their own.

Below is the HTML and Javascript code. Firstly, create an HTML file and name it "buttons.html". After that, create a "div" and give it an id of "container". Also, create an input field that takes the content of the buttons whenever they are clicked and sets the value to null.

<html>
<head>
<title>Creating Buttons</title>
</head>
<body>
    <div id="container">
    <input type="text" value="" id="input">
    </div>
</body>
</html>

Write a script in the button.html, if you prefer using external scripting you can use it by creating a Javascript file "buttons.js" and make sure you link it to your "buttons.html", but in this lesson, I will be making use of the internal scripting.

Looping numbers across buttons

let container = document.getElementById("container")
let input = document.getElementById("input")
let containerContent = document.createElement("div")
for (let i = 0; i < 10; i++){
    let button = document.createElement("button")
    button.textContent = i;
    button.addEventListener("click", function(){
        input.value += button.textContent;
    });//it displays any digit that's clicked
    containerContent.appendChild(button)
}
container.appendChild(containerContent);

and that's all, easy right? check how to loop alphabets across buttons as well below:

Looping alphabets across buttons

let container = document.getElementById("container")
let input = document.getElementById("input")
let containerContent = document.createElement("div")
const letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
for (let i = 0; i < letters.length; i++){
    let button = document.createElement("button")
    button.textContent = letters[i].toUppercase();
    button.addEventListener("click", function(){
        input.value += button.textContent;
    });//it displays any digit that's clicked
    containerContent.appendChild(button)
}
container.appendChild(containerContent);

And that's all on this lesson, drop questions in the comment section if you have any, thank you.

How to loop numbers and alphabets across buttons in Javascript

Table of contents

No headings in the article.