質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1528閲覧

textContentがnullになる

mcy

総合スコア25

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/11/02 06:04

javascript初心者です。
調べ方が悪いのか、、詰まってしまいました。
どなたかご教授お願いします。

【実装したいこと】
inputで設定したファイルとテキストをPostボタン押下時に表示
Postするたびに要素(div.span)を追加

【課題】
動的に追加した要素にtextContentを設定したいのですが、nullになります。
(Uncaught TypeError: Cannot set property 'textContent' of null)
htmlに要素を直書きすると表示されるのですが、うまく要素を追加できていないと考えています。

html

1<div class="mainContent"> 2 <!-- 投稿入力エリア --> 3 <p class="postHead">投稿する</p> 4 <input type="file" id="postUrl"> 5 <input type="text" id="postText" placeholder="テキスト"> 6 <div id="postButton">Post</div> 7 <!-- 投稿表示エリア --> 8 <div id="postArea"></div> 9 <!-- <div id="outputMessage"></div> 10 <span id="previewArea"></span> --> 11 </div> 12<script src="js/jquery-3.4.1.min.js"></script> 13<script src="js/post.js"></script>

js

1'use strict'; 2{ 3 const postUrl = document.getElementById('postUrl'); 4 const postText = document.getElementById('postText'); 5 const postButton = document.getElementById('postButton'); 6 var fileReader = new FileReader(); 7 var strFileInfo; 8 9 // ファイル選択時のイベントハンドラ 10 $('#postUrl').on('change', function(){ 11 strFileInfo = $('#postUrl')[0].files[0]; //ファイルをセット 12 //imageの場合 13 if(strFileInfo && strFileInfo.type.match('image.*')){ 14 //既にファイルが存在する場合、削除 15 $('#preview').remove(); 16 //プレビューエリアにセット 17 $('#previewArea').append('<img id="preview"/>'); 18 //HTML5 のAPI である FileReader() メソッドを初期化 19 fileReader.onload = function(event){ 20 $('#preview').attr('src', event.target.result); 21 } 22 } 23 }); 24 25 //Postボタン押下時処理 26 postButton.onclick = function() { 27 //divを生成 28 const div = document.createElement('div'); //divを生成 29 div.classList.add('message'); //クラスを付与 30 document.getElementById('postArea').appendChild(div); 31 var message = document.getElementsByClassName("message"); //生成したdivを取得 32 var outputMessage = "outputMessage"; //付与するID 33 message.id = "outputMessage"; 34 35 //spanを生成 36 const span = document.createElement('span'); 37 span.classList.add('preview'); 38 document.getElementById('postArea').appendChild(span); 39 var preview = document.getElementsByClassName("preview"); 40 var previewArea = "previewArea"; 41 preview.id = "previewArea"; 42 43 // 値を取得 44 var inputMessage = document.getElementById("postText").value; 45 var outputMessage = document.getElementById("outputMessage"); 46 outputMessage.textContent = inputMessage; 47 //セットした画像をローカルフォルダから読み込む 48 fileReader.readAsDataURL(strFileInfo); 49 } 50} 51

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

getElementsByClassName は複数の値が返ってくる可能性があるメソッドなので、単一の要素はかえってきません。[0]で一つ目の要素にアクセスするかなにかする必要があります。

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

【getElementsByClassNameとgetElementByIdの返り値の違い - Qiita】
https://qiita.com/rindarinda5/items/c26dc81fe8cd98992dc1

投稿2019/11/02 06:17

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問