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

HTML にテキストを追加するボタンをどのように作成しますか?


次がHTMLボタンだとしましょう-

<button id="clickButton">Click the button to add the input into the belowText Box</button>

document.getElementById()を使用して、ボタンクリック時ににテキストを追加します。以下はコードです-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=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">Click the button to add the input into the
below Text Box</button>
<br/><br />
<input id="readTheInput" />
<script>
   document.getElementById("clickButton").addEventListener("click", () =>{
      document.getElementById("readTheInput").value += "JavaScript";
   });
</script>
</body>
</html>

上記のプログラムを実行するには、ファイル名「anyName.html(index.html)」を保存して、ファイルを右クリックします。 VSCodeEditorで[OpenwithLiveServer]オプションを選択します。

出力

これにより、次の出力が生成されます-

HTML  input にテキストを追加するボタンをどのように作成しますか?

ここでは、ボタンを2回クリックします。これにより、次の出力が生成されます-

HTML  input にテキストを追加するボタンをどのように作成しますか?


  1. HTMLのテキストに下線を引く方法は?

    HTMLのテキストに下線を付けるには、タグを使用します。 タグはHTMLで非推奨になりましたが、HTML5で再導入されました。スペルミスのある単語など、別のテキストとはスタイル的に異なるテキストを表すようになりました。 テキストに下線を付けるには、style属性を使用することもできます。 style属性は、要素のインラインスタイルを指定します。この属性は、HTMLのタグ、CSSプロパティのtext-decorationで使用できます。 スタイル属性の使用は、グローバルに設定されたスタイルを上書きすることに注意してください。 HTMLのタグまたは外部スタイルシートに設定されているスタイルを上書き

  2. HTMLで複数行のテキスト入力(テキスト領域)を作成するにはどうすればよいですか?

    複数行のテキスト入力を作成するには、HTMLのタグを使用します。 cols属性とrows属性を使用して、テキスト領域のサイズを設定できます。フォーム内で使用され、ユーザーが複数の行にテキストを入力できるようにします。 タグの属性は次のとおりです- 属性 値 説明 オートフォーカス オートフォーカス ページの読み込み時にテキスト領域が自動的にフォーカスを取得するように指定します。 列 数値 表示される文字幅の数に基づいて、テキストエリアの幅を指定します。 無効 無効 表示される文字幅の数に基づいて、テキストエリアの幅を指定します。