javascriptでHTMLのテキストを取得したい

前提・実現したいこと

javascriptを使ってタグ内のテキストのみを取得しようとしています。
しかし、上手く取得できずに困っています。
エラーの詳細は下記に記します。

発生している問題・エラーメッセージ

html5
1<span id="their-id">A</span>

自分はAという文字列だけを取り出したいので、下記のコードを組みました。

javascript
1var h = document.getElementById('their-id');
2console.log(h.innerHTML);

console
1

その結果、コンソールには何も表示されませんでした。(javascriptは動いています)

そこで、下記のコードに変えてみたところ、

javascript
1var h = document.getElementById('their-id');
2console.log(h);

console
1<span id="their-id">A</span>

というようにタグを含めたものなら取得することが出来ます。

自分は、'A'という文字列だけ取得したいのですが、中々上手くいきません。
解決策がわかる方がいらしたら、教えていただけると嬉しいです。

コード全文

タイマー機能付きのweb通話アプリを作っています。

html
1<!DOCTYPE html>
2<html>
3<head lang="ja">
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5    <title>SkyWay JS SDK Tutorial</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9<div class="pure-g">
10
11    <!-- Video area -->
12    <div class="pure-u-2-3" id="video-container">
13        <video id="their-video" autoplay></video>
14        <video id="my-video" muted="true" autoplay></video>
15    </div>
16
17    <!-- Steps -->
18    <div class="pure-u-1-3">
19        <h2>SkyWay Video Chat</h2>
20
21        <p>Your id: <span style="color: rgb(28, 184, 65);" id="my-id">...</span></p>
22        <p>Share this id with others so they can call you.</p>
23        <h3>Make a call</h3>     
24        <form id="make-call" class="pure-form">
25            <input type="text" placeholder="Call user id..." id="callto-id">
26            <button href="#" class="pure-button pure-button-success" type="submit">Call</button>
27        </form>
28        <form id="end-call" class="pure-form">
29            <p>Currently in call with <span id="their-id"></span></p>//ここのspanタグ内のテキストを取得したい
30            <button href="#" class="pure-button pure-button-success" type="submit">End Call</button>
31        </form>
32        <div id="countDownWrap">
33            <div id="countDown"></div>
34            <ul>
35                <li id="startBtn"><img src="./img/btn_start.png" alt="スタート"></li>
36                <li id="stopBtn"><img src="./img/btn_stop.png" alt="ストップ"></li>
37                <li id="resetBtn"><img src="./img/btn_reset.png" alt="リセット"></li>
38            </ul>
39            <div id="controll">
40                <p>秒数変更<input type="text" id="setSecond"><img src="./img/btn_save.png" id="changeSecond"></p>
41                <p id="error"></p>
42            </div>
43        </div>
44    </div>
45</div>
46<!-- The core Firebase JS SDK is always required and must be listed first -->
47<script type="text/javascript" src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
48<script type="text/javascript" src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
49<script type="text/javascript" src="./config.js"></script>
50<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
51<script type="text/javascript" src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
52<script type="text/javascript" src="script.js"></script>
53
54<!-- TODO: Add SDKs for Firebase products that you want to use
55     https://firebase.google.com/docs/web/setup#config-web-app -->

javascript
1'use strict';
2
3var db = firebase.firestore();
4db.settings({
5  timestampsInSnapshots: true
6});
7
8let localStream = null;
9let peer = null;
10let existingCall = null;
11
12// カメラ映像、マイク音声の取得
13navigator.mediaDevices.getUserMedia({video: true, audio: true})
14    .then(function (stream) {
15        // Success
16        $('#my-video').get(0).srcObject = stream;
17        localStream = stream;
18    }).catch(function (error) {
19        // Error
20        console.error('mediaDevice.getUserMedia() error:', error);
21        return;
22    });
23
24// Peerオブジェクトの作成
25peer = new Peer({
26    key: '16c0bb93-5ea4-4114-bb5d-af179d53765f',
27    debug: 1
28});
29
30//openイベント
31peer.on('open', function(){
32    $('#my-id').text(peer.id);
33});
34
35//errorイベント
36peer.on('error', function(err){
37    alert(err.message);
38});
39
40//closeイベント
41peer.on('close', function(){    
42});
43
44//disconnectedイベント
45peer.on('disconnected', function(){
46});
47
48//発信処理
49$('#make-call').submit(function(e){
50    e.preventDefault();
51    const call = peer.call($('#callto-id').val(), localStream);
52    setupCallEventHandlers(call);
53    $('#countDownWrap').css('display','block');
54    $('#countDown__answer').css('display','none');
55});
56
57//切断処理
58$('#end-call').click(function(){
59    existingCall.close();
60});
61
62//着信処理
63peer.on('call', function(call){
64    call.answer(localStream);
65    setupCallEventHandlers(call);
66    $('#countDownWrap').css('display','block');
67    $('#countDown__call').css('display','none');
68    $('#startBtn').css('display','none');
69    $('#stopBtn').css('display','none');
70    $('#resetBtn').css('display','none');
71    $('#controll').css('display','none');
72});
73
74//通話中の接続要求を優先して、既存の接続は切断する(アプリの仕様次第)
75function setupCallEventHandlers(call){
76    if (existingCall) {
77        existingCall.close();
78    };
79    
80    // existingCallを保持
81    existingCall = call;
82
83    // 相手のカメラ映像・マイク音声を受信した際に発火
84    // 取得したStreamオブジェクトをvideo要素にセットする
85    call.on('stream', function(stream){
86        addVideo(call,stream);
87        setupEndCallUI();
88        $('#their-id').text(call.remoteId);
89        //相手方のID名のドキュメント作成
90        var newTimer = db.collection("users").doc(call.remoteId);
91        newTimer.set({
92            time: time
93        })
94    });
95
96    //切断されたら発火
97    call.on('close', function(){
98        removeVideo(call.remoteId);
99        setupMakeCallUI();
100    });
101}
102
103//UIのセットアップ
104function addVideo(call,stream){
105    $('#their-video').get(0).srcObject = stream;
106}
107
108function removeVideo(peerId){
109    $('#their-video').get(0).srcObject = undefined;
110}
111
112function setupMakeCallUI(){
113    $('#make-call').show();
114    $('#end-call').hide();
115}
116
117function setupEndCallUI(){
118    $('#make-call').hide();
119    $('#end-call').show();
120}
121
122//firestoreのfunction
123
124
125function takeTimer() {
126    newTimer.get().then(function(doc) {
127        if(doc.exists){
128            let result = '';
129            let data = doc.data();
130            result = data.time;
131            return result;
132            // $('#countDown').text(result);
133            console.log(result);
134        } else {
135            console.log("No such a document!");
136        }
137    }).catch(function(error) {
138        console.log("Error getting document:", error);
139    })
140}
141
142//タイマーの設定-----------------------------------
143
144var setSecond = 100; //タイマーの秒数
145var setPause = setSecond;//ストップ時の秒数を保存
146var time=setSecond; //残り秒数を保存
147var timerID; //setInterval用の変数
148
149//残り秒数を表示させる関数
150function textDisplay(){
151    $('#countDown').text(time);
152}
153
154//カウントを1減らす関数
155function countDown(){
156    time--; 
157    // setTimer();
158    // takeTimer();
159    // $('#countDown__answer').text(result);
160    setPause = time;  //ストップ時に使用するために残り秒数を代入
161    textDisplay();
162}
163
164//タイマーの停止用関数
165function countStop(){
166    clearInterval(timerID); 
167}
168
169//タイマースタートの関数
170function timerStart(){
171    countStop(); //カウントダウンの重複を防ぐため、今動いているタイマーをクリア
172    timerID = setInterval(function(){
173        if(time <= 0) {
174            clearInterval(timerID);
175            existingCall.close();
176        } else {
177            countDown();
178        }
179    }, 1000);
180}
181
182// ボタンの実行処理---------------------------------------
183textDisplay();
184// setTimer();
185// takeTimer();
186
187//タイマースタート
188$("#startBtn").click(function(){
189    time= setPause;//途中からでも開始出来る
190    textDisplay();
191    timerStart();
192});
193
194//タイマー停止
195$("#stopBtn").click(function(){
196    countStop();
197});
198
199//タイマー初期化
200$("#resetBtn").click(function(){
201    countStop();
202    time = setPause = setSecond; //初期値に初期化
203    textDisplay();
204});
205
206//秒数変更機能
207$("#changeSecond").click(function(){
208   
209    var seveSecond = $("#setSecond").val();
210    
211    if(seveSecond.match( /[^0-9]+/ )){ //^は否定の文字クラス
212       $("#error").text("※半角数字で入力してください")
213    
214    } else if(seveSecond=='') {
215       $("#error").text("※値を入力してください")
216    } else {
217       $("#error").text("")
218       setSecond = seveSecond;
219       countStop();
220       time = setPause = setSecond;
221       textDisplay();
222    }
223});
224
225
226var h = document.getElementById('their-id');
227console.log(h.innerHTML);//タグ内のテキストを取り出そうとしています。

kei344

2019/08/11 08:30

スクリプトの呼び出しを含めた、コード全体も追記してもらえませんか？

yuhei_seguchi

2019/08/11 08:43

この方が分かりやすいと思ったのですが、逆効果でしたね。。追記しました。

行動規範の内容に同意します

回答1件

ベストアンサー

<p>Currently in call with <span id="their-id"></span></p>//ここのspanタグ内のテキストを取得したい

spanタグ内にテキストを設定していない。
firebaseまたはjqueryまたはskyway-latestが何かしている。それらを動かさない状態でも再現するかどうか疑問です。
例えばtwitterのページでconsole.logを動かすと何も出力しませんがtwitterのページで見ている。
ブラウザの種類、環境依存。

などが可能性として考えられます。

h=document.getElementById("their-id")
<span id="their-id">A</span>

h.textContent
"A"

h.innerText
"A"

h.innerHTML
"A"

h.outerHTML
"<span id="their-id">A</span>"

h.innerHTML123
undefined

こちらの環境ではh.innerHTMLを表示できました。
プロパティ名を間違っている場合はundefinedが表示されます。

投稿2019/08/11 09:07