祝日の挨拶カード | JavaScript | DOM 操作

はじめに

このプロジェクトでは、「書く」ボタンをクリックするとランダムな挨拶を表示する祝日の挨拶カードを作成する方法を学びます。このプロジェクトは、JavaScript 関数、イベントリスナー、および DOM 操作をどのように使うかを理解するのに役立ちます。

このプロジェクトでは、以下を学びます。

このプロジェクトを完了すると、以下のことができるようになります。

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── index.css
├── index.html
└── index.js

ここで：

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

このステップでは、提供された greetings 配列からランダムに挨拶を選択するための writeGreeting() 関数を実装します。

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

このコードは、greetings 配列内でランダムなインデックスを生成し、対応する挨拶を返します。

このステップでは、greetingDisplay 要素に挨拶を表示するための show() 関数を実装します。

greetingDisplay.innerHTML = writeGreeting();

このコードは、ランダムな挨拶を取得するために writeGreeting() 関数を呼び出し、その後、greetingDisplay 要素の innerHTML を設定して挨拶を表示します。

おめでとうございます！あなたは祝日の挨拶カードプロジェクトを完了しました。

おめでとうございます！このプロジェクトを完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。