innerhtml textContentで挙動が変わる理由がわからない

1番目のコードと2番目のコードで挙動が変わる理由がわかりません。
htmlに番号を含んだliタグが複数あり、それを押すとpタグ内の値が押したliタグ内の値になるようにしています。
(pタグは最初空文字です)

また以下のそれぞれのパターンでtextContent部分をinnerHTMLに変えても2番目のコードと同じ挙動になります。

html
1<html lang="ja">
2  <head>
3    <meta charset="utf-8">
4    <link rel="stylesheet" href="cul.css">
5  </head>
6  <body>
7   <div class="case">
8    <ul>
9      <li id="C">C</li>
10      <li>7</li>
11      <li>4</li>
12      <li>1</li>
13      <li id="minus">＋/－</li>
14    </ul>
15
16    <ul>
17      <li id="squared">x＾2</li>
18      <li>8</li>
19      <li>5</li>
20      <li>2</li>
21      <li>0</li>
22    </ul>
23
24    <ul>
25      <li id='b'>&lt;</li>
26      <li>9</li>
27      <li>6</li>
28      <li>3</li>
29      <li id='d'>.</li>
30    </ul>
31
32    <ul>
33     <li id="devide">÷</li>
34     <li id="times">×</li>
35     <li id="minus">－</li>
36     <li id="plus">＋</li>
37     <li id="equal">=</li>
38    </ul>
39
40    <p></p>
41    
42   </div> 
43
44   <p class="hidden"></p>
45
46  
47   <script src="cul.js"></script>
48  </body>
49</html>

以下のコードですとpタグ内の値はliを押すたびに切り替わります。
(もはやget_total_t内は空ではないのにif文が実行)

js
1
2const get_li = document.getElementsByTagName('li');
3var get_total = document.getElementsByTagName('p')[0];
4var get_total_t = document.getElementsByTagName('p')[0].textContent;
5
6for(let i = 0; i < 20; ++i) {
7  get_li[i].addEventListener("click", function(){cul(i)});
8}
9
10
11function cul(i){
12   
13　//clickしたliタグ内が番号であり、かつpタグ内が空ならば
14  if(!isNaN(get_li[i].innerHTML) && !get_total_t){
15
16    get_total.textContent = get_li[i].textContent;
17
18  }else{
19    console.log('false'); 
20  }
21
22}
23

次のコードでは切り替わりません。
if文内のget_total.textContentをget_total_tに変えるとliタグを押してもpタグは空白のまま.(if文がtrueのほうで実行されているのはconsole.logを使って確認しました。)
2回目からはconsoleにfalseが表示されます。

js
1
2const get_li = document.getElementsByTagName('li');
3var get_total = document.getElementsByTagName('p')[0];
4var get_total_t = document.getElementsByTagName('p')[0].textContent;
5
6for(let i = 0; i < 20; ++i) {
7  get_li[i].addEventListener("click", function(){cul(i)});
8}
9
10
11function cul(i){
12   
13　//clickしたliタグ内が番号であり、かつpタグ内が空ならば
14  if(!isNaN(get_li[i].innerHTML) && !get_total_t){
15
16    get_total_t = get_li[i].textContent;
17
18  }else{
19    console.log('false'); 
20  }
21
22}
23

まとめますと、
1つ目のコードで２回目以降get_total_t内は空ではないのにif文が実行されるのはなぜか
1つ目のget_total.textContentと2つ目のget_total_tは同じはずなのになぜ挙動が違うのか。
なぜinnerhtmlでも動かないのか。
です。

kei344

2020/05/28 05:41

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

dda

2020/05/28 05:47

1つ目のget_total.textContentと2つ目のget_total_tは同じはずなのになぜ挙動が違うのか。なぜinnerhtmlで動かないのか。この二つの問いに対するヒントが来るかもしれないという思いが捨てきれずにいます。

kei344

2020/05/28 06:00

「同じはず」がそもそも間違いであると回答しましたが、それについて意味がわかりませんか？

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

回答2件

HTMLをdomとして解釈する場合、node単位かelement単位かで
結果が変わってきます

投稿2020/05/28 06:07

yambejp

総合スコア116724

ベストアンサー

1つ目のコードで２回目以降get_total_t内は空ではないのにif文が実行されるのはなぜか

var get_total_t = document.getElementsByTagName('p')[0].textContent; はget_total_t にテキストを代入しただけで、.textContentそのものが入っているわけではないから。（「get_total_t内は空ではない」が間違い）

投稿2020/05/28 03:49

kei344

総合スコア69606

dda

2020/05/28 04:29

となれば！get_total_tというのはなにを判定しているのでしょうか。

kei344

2020/05/28 04:33

最初にとったtextContentの値の空文字列です。

dda

2020/05/28 05:20

理解できました。ありがとうございました。

kei344

2020/05/28 06:10

> 理解できました。 > dda 2020/05/28 14:47 > 1つ目のget_total.textContentと2つ目のget_total_tは同じはずなのになぜ挙動が違うのか。わかった振りをするのが一番学習の妨げになるので、わからないならそう伝えたほうがよいです。他の回答もついたようなので、そちらにお任せします。

dda

2020/06/06 09:50

document.getElementsByTagName('p')[0].textContent;がpタグ内ののコピーではなく参照だと勘違いしていました。ありがとうございました！

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

あなたの回答