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秒後
[フォーム][ボタン]
あなたの入力した回答:寿司
正解!
寿司、おいしいですよね
他の方の質問で「エレメントを使いまわしているのでは」という回答があったのですがいまいち理解できず…
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/27 10:22 編集
2018/05/28 02:10