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

【JavaScript入門】HTMLのinput要素にテキストを追加するボタンの作り方

まず、例として次のようなHTMLボタンを用意します。

<button id="clickButton">クリックすると下のテキストボックスに文字が追加されます</button>

ボタンをクリックしたタイミングで <input> 要素にテキストを追加するには、document.getElementById() で対象の要素を取得し、value プロパティに文字列を代入します。以下が実際のコードです。

サンプルコード

<!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>
<button id="clickButton">クリックすると下のテキストボックスに文字が追加されます</button>
<br/><br />
<input id="readTheInput" />
<script>
    document.getElementById("clickButton").addEventListener("click", () => {
        document.getElementById("readTheInput").value += "JavaScript";
    });
</script>
</body>
</html>

コードのポイント

このコードの動作を支えているのは、次の2点です。

  • addEventListener("click", ...)：ボタンがクリックされた瞬間に、指定した関数（アロー関数）を実行します。
  • .value += "JavaScript"：入力欄の現在の値（value）の末尾に「JavaScript」という文字列を追記します。「=」ではなく「+=」を使うことで、すでに入力されているテキストを消さずに追加できるのがポイントです。

そのため、ボタンを押すたびに「JavaScript」という文字列がどんどん連結されていきます。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」などの任意の名前で保存し、保存したファイルを右クリックします。表示されたメニューから、VS Codeエディターの拡張機能「Live Server」による「Open with Live Server」を選択してください。ブラウザが自動的に起動し、ページが表示されます。

実行結果

プログラムを実行すると、ブラウザには次のような画面が表示されます。

【JavaScript入門】HTMLのinput要素にテキストを追加するボタンの作り方

ここで、ボタンを2回クリックしてみましょう。テキストボックスには「JavaScriptJavaScript」と表示され、次のような結果になります。

【JavaScript入門】HTMLのinput要素にテキストを追加するボタンの作り方


  1. HTMLでテキストに下線を引く方法をわかりやすく解説

    HTMLでテキストに下線を引く基本の方法HTMLでテキストに下線を引くには、<u>タグを使用します。<u>タグはかつてHTMLで非推奨とされましたが、HTML5で再び導入されました。現在では、単語のスペルミスのように、周囲のテキストとは意味的に異なることを示すために使用されています。下線を引くもう一つの方法として、style属性を使うやり方があります。style属性は要素に対してインラインスタイルを直接指定するもので、CSSのtext-decorationプロパティと組み合わせることで、<p>タグなどのHTML要素に下線を適用できます。ただし、style属性

  2. 【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法

    HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。 それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。 属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols