JavaScriptに詳しい方教えてください

divのhello文字をクリック
↓
input textに置き換え
↓
ENTER押したらinput textのvalueのdivにする

これを繰り返したいんですがなぜかddがundefinedになります

原因がわかる方いらっしゃいますでしょうか？

<div id="d">hello</div>

<script>
d.addEventListener('click', function() {
d.innerHTML='<input id="d" type="text" value="'+this.innerText+'" onkeydown="k()">';
}, { once: true });
function k(){
if (event.keyCode == 13){
dd=document.getElementById('d').value;
d.innerHTML='<div id="d">'+dd+'</div>';
}
};
</script>

m.ts10806

2021/08/18 05:59

>JavaScriptに詳しい方教えてくださいタイトルに中身も要件も全くないので調整してください。 https://teratail.com/help/question-tips#questionTips3-1

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

回答3件

IDは同ページ内の重複不可

投稿2021/08/18 05:58

m.ts10806

総合スコア80875

ajh

2021/08/18 06:00

innerHTMLで置換するともとあったidはDOM上から消えてるんではないでしょうか？

yambejp

2021/08/18 06:19

> もとあったidはDOM上から消えてるよくご自身のソースを見返してみてください id=dのdivにid=dのテキストボックスを挿入しています

ajh

2021/08/18 06:32

appendChildならわかりますがinnerHTMLは置換だから前の存在が消えて新たなdが誕生するのではないんですか？

maisumakun

2021/08/18 06:33

「中身だけ」書き換えます。外側の<div id="d">は変化しません。

m.ts10806

2021/08/18 08:33 編集

推論や自身の想いではなく、JavaScriptで書き換えられたHTMLを確認してください。ブラウザのデベロッパーツール。百聞は一見に如かず。プログラムは書いた通りにしか動かない。

m.ts10806

2021/08/18 08:37 編集

＞置換だから要素自体を置き換えるという旨はどこにも言及されてません。 https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML 適用範囲はあくまで「要素内」です。上記にあるようにこれは「プロパティ」です。

ajh

2021/08/18 15:57

ドヤ顔で「プログラムは書いた通りにしか動かない」とかきもい眼鏡

m.ts10806

2021/08/18 23:11

無関係の暴言として通報しました。「思った通りには動かない」を直接的に書いただけでドヤ顔と解釈してしまうのは非常に残念。

m.ts10806

2021/08/19 01:24

私は先にコメントいただいている2名には及びませんし勉強させてもらってる部分も多いですが、業務に困らない程度にはプログラミングできます。なので、ドヤ顔だのキモいだの増して差別的に眼鏡を使うような人にとやかく言われる筋合いはありません。回答に間違いがあるなら稚拙な単語を並べた暴言に頼らずきちんと論理的に根拠を以て指摘してください。 id重複の解決だけで本件が解決するとは限りませんが、重複してる時点でJavascriptは正常に動かないので、重複の解決は大前提です。 htmlやcssのことも考慮しなければならないので思ってる以上に難しいんですよ。だから「書いたとおりにしか動かない」これを知ってるか知ってないか、受け入れているかどうかでは大違いです。発言からその認識がないものと判断したためコメントしました。わざわざ暴言吐かなければならないほどの状況ですか？

退会済みユーザー

2021/08/19 18:29

私は「プログラムは書いた通りにしか動かない。」は明らかに不必要であると考える。m.ts10806は傲慢である。

m.ts10806

2021/08/19 21:49

プログラミングにおける本質部分を根拠なしに「明らかに不必要」と決めつける理由は？いずれにしても何度追い出されても執拗に戻ってくる迷惑ユーザーとして通報しました。

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

javascript
1<div id="d">hello</div>
2<script>
3d.addEventListener('click', function(e) {
4  if(e.target.nodeName=="DIV"){
5    d.innerHTML=`<input type="text" value="${e.target.textContent}" onkeydown="k(this)">`;
6  }
7},false);
8function k(obj){
9  if (event.keyCode == 13){
10    d.textContent=obj.value;
11  }
12};
13</script>