JavaScript編~リスト番号に0足して桁数を合わせよう~

UVERworld自身を超える10枚目のアルバム

UNSER

2020年に結成20周年、デビュー15周年を迎えるUVERworldの記念すべき10枚目のアルバム! 12月には東京ドーム2デイズ公演を控え、そのうち1日は男性限定ライブ、通称"男祭り"となり、日本記録を自身で更新する。

HTMLソースコード

<div id="list"></div>

JavaScriptのソースコードと概要

var addzero = function (num, digit) {
  var numString = String(num);
  while (numString.length < digit) {
    numString = "0" + numString;
  }
  return numString;
}

var songs = ["曲名",……,……,……];
for (var i = 0; i < songs.length; i++) {
  var UNSER = document.createElement("p");
  UNSER.textContent = addzero(i + 1, 2) + ". " + songs[i];
  document.getElementById("list").appendChild(UNSER);
}

ファンクションの仕組みと処理

var addzero = function (num, digit)

ファンクションは2つのパラメーターを受け取っています。
numが成形する数で、digitは桁数です。
『01』と表示するには文字列連結が必要なので、数値を文字列に変換処理しなければいけない。

var numString = String(num);

Stringは()内のデータを文字列へ変換します。

while (numString.length < digit) {
numString = "0" + numString;
}

digitで指定された桁数に達するまで、『0』を連結させます。
文字列データのlengthプロパティは文字列の文字数を表します。

曲名リストの番号

配列を作成して、曲名を入れていく！

↓↓詳しくは↓↓
配列～項目リストの表示

※インデックス番号は0からなので、成形する数は∔1で合わせます。
※配列の[]内は項目が多いと、カンマの後ろで改行できる。