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

JavaScriptでdiv要素から値を取得するには？undefinedになる原因と解決法

div要素はinput要素とは異なり、valueプロパティを持っていません。そのため、element.valueのようにアクセスすると「undefined」が返されてしまいます。

div要素の中身（テキストやHTML）を取得したい場合は、document.getElementById().innerHTMLを使用します。以下がJavaScriptのコード例です。

サンプルコード

<!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 class='getValueFromDiv' id='getValue' contenteditable="true" onkeyUp='display()'
style="color: red"></div>
<script>
   function display(){
      var storedValue = document.getElementById('getValue').innerHTML.value="This is the
      value";
      console.log("The value is==="+storedValue);
   }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名をanyName.html（index.html）として保存します。その後、VS Codeエディター上でファイルを右クリックし、「Open with Live Server」を選択してください。

実行結果

以下が出力結果です。マウスでクリックして矢印キーを入力すると、コンソールに次のような出力が表示されます。

JavaScriptでdiv要素から値を取得するには？undefinedになる原因と解決法


  1. JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

    はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table>   <tr id=StudentDetails>      &

  2. JavaScriptでCSSプロパティの現在の値を取得する方法｜getComputedStyleの使い方

    JavaScriptでHTML要素に適用されているCSSプロパティの現在の値（計算済みスタイル）を取得するには、window.getComputedStyle()メソッドを使用します。このメソッドは、対象の要素に適用されたすべてのスタイル情報を含むオブジェクトを返します。返されたオブジェクトに対してgetPropertyValue()メソッドを呼び出せば、任意のCSSプロパティの値を文字列として取得できます。インラインスタイルが設定されていない場合でも、外部CSSや継承によって最終的に適用されている値を取得できるのが大きな特徴です。基本構文const element = document.qu