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

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

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

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

Q&A

解決済

1回答

1632閲覧

appendChildの上書きについて

shiramiso

総合スコア25

JavaScript

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

0グッド

0クリップ

投稿2018/05/25 10:48

編集2018/05/25 10:49

Javascript初学者です。createElementを触っています。

【実現したいこと】
フォームに入力された値を受け取り、
onclickでフォームエリアの下に入力した時間と入力値を表示。

⇒その入力値が正解だった場合、
さらに時間差でその下に文字列を追加していきたいのですが、
最初にcreateしたフォーム入力値が上書きされてしまいます。

Javascript

1<script type="text/javascript" language="javascript"> 2function onButtonClick() { 3 4 //entrytimeを取得 5 var entryTime = function(){ 6 var time = new Date(); 7 var month = time.getMonth() + 1; 8 var d = time.getDate(); 9 var h = time.getHours(); 10 var m = time.getMinutes(); 11 var s = time.getSeconds(); 12 var entryTime = month + "月" + d + "日" + h + "時" + m + "分" + s + "秒"; 13 return entryTime; 14 } 15 16 //entrynameを取得 17 var entryname = document.forms.id_form1.id_textBox1.value; 18 var entryproperty = entryTime() + entryname; 19 20 var addentry = document.createElement("p"); 21 addentry.setAttribute('id', 'entry'); 22 addentry.innerText = entryproperty; 23 document.getElementById("output").appendChild(addentry); 24 25 //もし正解だった場合 26 if(entryname == "正解"){ 27 setTimeout(function(){ 28 addentry.setAttribute('id', 'entry'); 29 addentry.innerText = "正解です。"; 30 },1000); 31 } 32} 33</script>

HTML

1 <form name="form1" id="id_form1" action=""> 2 <input name="textBox1" id="id_textBox1" type="text" value="" /> 3 <input type="button" value="ENTRY" onclick="onButtonClick();" /> 4 </form> 5 <hr/> 6 <div id="output"></div>

例えば以下のようなイメージです。

[フォーム][ボタン]

[寿司][ボタン]←値を入力後、click

[フォーム][ボタン]
あなたの入力した回答:寿司

↓1秒後

[フォーム][ボタン]
あなたの入力した回答:寿司
正解!

↓さらに1秒後

[フォーム][ボタン]
あなたの入力した回答:寿司
正解!
寿司、おいしいですよね

他の方の質問で「エレメントを使いまわしているのでは」という回答があったのですがいまいち理解できず…
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

var addentry = document.createElement("p");

addentry.setAttribute('id', 'entry');

新しくつくったpにentryというidをつけていますが
これを繰り返すと同じidをもったタグが複数ある構造に成るのでNGです。

sample

javascript

1 2<script> 3HTMLElement.prototype.trigger=function(eventStr){ 4 if (document.createEvent) { 5 var e = document.createEvent("HTMLEvents"); 6 e.initEvent(eventStr, true, true ); 7 return this.dispatchEvent(e); 8 } else { 9 var e = document.createEventObject(); 10 return this.fireEvent("on"+eventStr, e); 11 } 12}; 13window.addEventListener('DOMContentLoaded', function(e){ 14 document.querySelector('#id_form1').addEventListener('submit',function(e){ 15 e.preventDefault(); 16 }); 17 document.querySelector('#id_textBox1').addEventListener('keydown',function(e){ 18 if(e.keyCode==13){ 19 document.querySelector('#entry').trigger('click'); 20 }; 21 }); 22 document.querySelector('#entry').addEventListener('click',function(e){ 23 var entryTime = function(){ 24 var time = new Date(); 25 var month = time.getMonth() + 1; 26 var d = time.getDate(); 27 var h = time.getHours(); 28 var m = time.getMinutes(); 29 var s = time.getSeconds(); 30 var entryTime = month + "月" + d + "日" + h + "時" + m + "分" + s + "秒"; 31 return entryTime; 32 } 33 var entryname = document.querySelector('#id_textBox1').value; 34 var entryproperty = entryTime() + entryname; 35 var addentry = document.querySelector('.entry')?document.querySelector('.entry'):document.createElement("p"); 36 addentry.classList.add('entry'); 37 addentry.textContent=entryproperty; 38 document.querySelector('#output').appendChild(addentry); 39 if(entryname == "寿司"){ 40 setTimeout(function(){ 41 var addentry = document.createElement("p"); 42 addentry.textContent = "正解!"; 43 document.querySelector('#output').appendChild(addentry); 44 },1000); 45 setTimeout(function(){ 46 var addentry = document.createElement("p"); 47 addentry.textContent = "寿司、おいしいですよね "; 48 document.querySelector('#output').appendChild(addentry); 49 },2000); 50 } 51 }); 52}); 53 54</script> 55<form name="form1" id="id_form1" action=""> 56<input name="textBox1" id="id_textBox1" type="text" value=""> 57<input type="button" value="ENTRY" id="entry"> 58</form> 59<hr/> 60<div id="output"></div>

投稿2018/05/25 11:03

編集2018/05/25 11:26
yambejp

総合スコア114583

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

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

shiramiso

2018/05/27 10:22 編集

早速のコメント、ありがとうございます。 私が書いていたスクリプトとかけ離れており、まだまだだなぁとショックを受けております。。 前半にprottypeやaddEventListenerなど使用されていますが、このような流れで書くことでどういったメリットがあるのでしょうか。意図などよろしければご教示いただけますと幸いです。よろしくお願いいたします。
yambejp

2018/05/28 02:10

> このような流れで書くことでどういったメリットがあるのでしょうか jsは最終的には別ファイルで処理するのが肝要です したがって何処で読み込まれても実行ができるように ソースの前半に書いて動くような仕組みにする必要があります
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問