JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】ボタンクリックでJavaScript配列の要素を逆順に1つずつ表示する方法

JavaScriptの配列を逆順に1つずつ表示するには？

本記事では、ボタンをクリックするたびに、JavaScriptの配列要素を後ろから順に（逆順で）1つずつ表示する方法を解説します。

まず、次のような配列を例として用意しました。

var listOfNames = [
   'John',
   'David',
   'Bob'
];

そして、クリックすると配列の値を逆順に取得できるボタンは以下のとおりです。

<button id="reverse" onclick="reverseTheArray()">クリックして逆順の値を表示</button>

実装のポイント

配列の要素を逆順に表示するための基本的な流れは以下のとおりです。

  1. まず配列の長さ（length）を取得し、そこから1を引いて最後の要素のインデックスを求めます。
  2. ボタンがクリックされるたびに、そのインデックスに対応する要素を画面に表示します。
  3. 表示後にインデックスを1つ減らし（デクリメント）、次回のクリックに備えます。
  4. インデックスが0未満になったら、最後の要素のインデックスに戻すことで、何度でも逆順表示を繰り返せるようにします。

完全なコード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div align="center" id='reverseTheArray'></div>
<button id="reverse" onclick="reverseTheArray()">クリックして逆順の値を表示</button>
<script>
    var listOfNames = [
       'John',
       'David',
       'Bob'
    ];
    count = listOfNames.length - 1;
    function reverseTheArray(){
       document.getElementById('reverseTheArray').innerHTML =
       listOfNames[count];
       count--;
       if (count < 0)
          count = listOfNames.length - 1;
    }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、「index.html」などの任意のファイル名でコードを保存します。その後、VS Codeエディタ上でファイルを右クリックし、メニューから「Open with Live Server」を選択してください。ブラウザが起動し、ページの動作をすぐに確認できます。

出力結果

プログラムを実行すると、最初に以下のような画面が表示されます。

【初心者向け】ボタンクリックでJavaScript配列の要素を逆順に1つずつ表示する方法

ステップ1

ボタンをクリックすると、まず配列の最後の値である「Bob」が表示されます。

【初心者向け】ボタンクリックでJavaScript配列の要素を逆順に1つずつ表示する方法

ステップ2

続けてボタンをクリックすると、後ろから2番目の値「David」が表示されます。さらにクリックを重ねると「John」が表示され、その後は再び「Bob」へと戻り、逆順の表示が繰り返されます。

【初心者向け】ボタンクリックでJavaScript配列の要素を逆順に1つずつ表示する方法

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <