Blog

HOME > Web > javascript > 【javascrript】テキストを複数の箇所にランダムに表示する

【javascrript】テキストを複数の箇所にランダムに表示する

2024/01/14

javascript

備忘録です。

テキストを複数の箇所にランダムに表示する方法です。

<h1><span id="randomText1">ここにランダムなテキストが表示されます</span></h1>
<p><span id="randomText2">ここにもランダムなテキストが表示されます</span></p>

<script>
  // 表示したいテキストの配列
  var texts = [
    "こんにちは。",
    "How are you?",
    "今日はいい天気ですね。",
    "Random Text 1",
    "Random Text 2",
    // 追加したいテキストをここに追加できます
  ];

  // テキストをランダムに取得する関数
  function getRandomText() {
    var randomIndex = Math.floor(Math.random() * texts.length);
    return texts[randomIndex];
  }

  // ページが読み込まれたときに実行する処理
  document.addEventListener("DOMContentLoaded", function () {
    // ランダムなテキストを取得して表示
    document.getElementById("randomText1").innerText = getRandomText();
    document.getElementById("randomText2").innerText = getRandomText();//追加で増やす
  });
</script>

表示したいテキストは任意で変更できます。
表示箇所を増やしたい場合には「ランダムなテキストを取得して表示」でrandomTextと「ここにもランダムなテキストが表示されます」を増やします。

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ