JS Menampilkan angka dari rentang yang diberikan

 

<!DOCTYPE html>

<html>

  <head>

    <title>Menampilkan angka dari rentang yang diberikan</title>

  </head>

  <body>

    <h1>Menampilkan angka dari rentang yang diberikan</h1>

    <label for="numbers-input">Masukkan rentang angka (dipisahkan dengan koma): </label>

    <input id="numbers-input" type="text">

    <button id="check-button">Cek</button>

    <p id="result"></p>

    

    <script>

      document.getElementById("check-button").addEventListener("click", function() {

        const input = document.getElementById("numbers-input").value;

        const numbers = getNumbersFromRange(input);

        document.getElementById("result").innerText = "Angka: " + numbers;

      });

      

      function getNumbersFromRange(input) {

        const [start, end] = input.split(",").map(Number);

        const numbers = [];

        for (let i = start; i <= end; i++) {

          numbers.push(i);

        }

        return numbers.join(", ");

      }

    </script>

  </body>

</html>

Penjelasan singkat tentang kode di atas:

1. Di dalam tag <head>, terdapat judul halaman.
2. Di dalam tag <body>, terdapat elemen-elemen HTML yang dibutuhkan, yaitu input untuk memasukkan rentang angka, tombol untuk memeriksa rentang angka, dan elemen p untuk menampilkan hasil.
3. Di dalam tag <script>, terdapat kode JavaScript yang digunakan untuk memeriksa rentang angka yang dimasukkan dan menampilkan angka-angka dalam rentang tersebut.
4. Pertama-tama, kita menambahkan event listener pada tombol "Cek" untuk menjalankan fungsi getNumbersFromRange.
5. Fungsi getNumbersFromRange menerima satu argumen, yaitu string yang berisi rentang angka yang dimasukkan oleh pengguna. Pertama-tama, kita memecah string tersebut menjadi dua angka menggunakan metode split. Kemudian, kita mengonversi kedua angka tersebut menjadi tipe data Number menggunakan metode map. Selanjutnya, kita membuat sebuah array kosong numbers. Di dalam loop for, kita menambahkan angka-angka dari rentang yang diberikan ke dalam array numbers. Akhirnya, kita mengembalikan angka-angka dalam rentang tersebut dalam bentuk string menggunakan metode join.
6. Hasil dari fungsi getNumbersFromRange kemudian ditampilkan pada elemen p dengan menggunakan metode getElementById dan innerText.

berikut ini merupakan modifikasi agar bisa memasukan angka mulai dari 001 dan seterusnya tanpa menghilangkan angka 0.

<!DOCTYPE html>

<html>

  <head>

    <title>Menampilkan angka dari rentang yang diberikan</title>

  </head>

  <body>

    <h1>Menampilkan angka dari rentang yang diberikan</h1>

    <label for="numbers-input">Masukkan rentang angka (dipisahkan dengan koma): </label>

    <input id="numbers-input" type="text">

    <br>

    <label for="digit-input">Masukkan panjang digit (default: 2): </label>

    <input id="digit-input" type="number" value="2" min="1">

    <button id="check-button">Cek</button>

    <p id="result"></p>

    

    <script>

      document.getElementById("check-button").addEventListener("click", function() {

        const input = document.getElementById("numbers-input").value;

        const digit = document.getElementById("digit-input").value;

        const numbers = getNumbersFromRange(input, digit);

        document.getElementById("result").innerText = "Angka: " + numbers;

      });

      

      function getNumbersFromRange(input, digit) {

        const [start, end] = input.split(",").map(Number);

        const numbers = [];

        for (let i = start; i <= end; i++) {

          numbers.push(String(i).padStart(digit, "0"));

        }

        return numbers.join(", ");

      }

    </script>

  </body>

</html>