Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
html,css,jquery,javascriptを活用してメモ帳を作成しており、テキストエリアにデフォルトで日時時間の情報が入るようにしたい（メモに時間情報を記録させたい）
###発生している問題・エラーメッセージ
javascriptで日時を表示し、それをテキストエリアに乗せるようなコードを書きたいのですが、調べてもやり方がわかりませんでした。jqueryを使っているので、javascriptの記述をどう入れたらいいか、よくわかっておりません。（恐らく分かっている人からすると一瞬で解決するレベルです）
エラーメッセージ
Google Chromeでconsoleをみても、特にエラーはありませんでした。試した方法が正しくないだけと思われます。
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Memo</title> <script src="js/jquery-2.1.3.min.js"></script> <link rel="stylesheet" href="css/sample.css"> </head> <body> <header> <h1>Programming Study</h1> <select id="memos"> <option select value="page1">page1</option> <option select value="page2">page2</option> <option select value="page3">page3</option> <option select value="page4">page4</option> <option select value="page5">page5</option> <option select value="page6">page6</option> <option select value="page7">page7</option> <option select value="page8">page8</option> <option select value="page9">page9</option> <option select value="page10">page10</option> </header> <main style="display:none;"> <textarea id="text_area" placeholder="キーワードを入力">'document.write(now.toLocaleString())'</textarea> </main> <script> $(document).ready(function(){ $("#save").on("click",function(){ var pages = $("#memos").val(); var value = $("#text_area").val(); localStorage.setItem(pages,value); alert("保存しました"); }); $("#clear").on("click",function(){ var pages = $("#memos").val(); var value = $("#text_area").val(); localStorage.removeItem(pages,value); alert("削除しました"); $("#text_area").val(""); }); $("#memo_select").on("click",function(){ var memos = $("#memos").val(); var value = localStorage.getItem(memos); $("#text_area").val(value); $("#text_area").css({ "color":"#ff0033", }); $("main").show(); }); $("#page_delete").on("click",function(){ $("#text_area").val(""); }); }); var now = new Date(); </script> </body> </html>
###試したこと
課題に対してアプローチしたことを記載してください
javascriptで日時を取得し、'document.write(now.toLocaleString())'をtextureのタグ内に入れて表示できないかトライしましたがダメでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
コードブロックを入れました。ご指摘ありがとうございます！
「```ここに言語を入力」から「ソースコードを書いてください 」が不要です。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
回答2件
0
2点、指摘があります。
0. </select> が無い
0. <main style="display:none;"> でテキストエリアを非表示にしている
投稿2016/07/28 14:08
総合スコア69398
コメントありがとうございます！
1について、質問欄では入ってなかったですが、実物ではつけていました。
2が問題だったようで、display:noneを外した所、ちゃんと表示させる事ができました！
ただ、やりたかった機能がまだ未完全です。セレクトボックスでページを開く度に、日付が表示されてそれを記録できるという事でしたので、自分で調べたり教えてもらいながらブラッシュアップしていきたい次第です。
初心者で些細な事も分からない私を助けて頂きまして、本当にありがとうございました。
0
ベストアンサー
こんにちはm(_ _)m
<textarea>...</textarea>に直接書き込んでしまうと、テキストエリア内にそのまま表示されてしまいますので、
javascript
1$(document).ready(function(){ 2 $("textarea").val(now.toLocaleString()) 3 ...略... 4});
JSからテキストエリアのvalueを操作したい場合は
$("textarea").val()
で、val()の中に表示させたい内容を書くといいですよ^^
テキストエリアに限らず、<input type="text">などにも応用可能です♪
投稿2016/07/28 10:52
総合スコア328
不躾な質問ながら、ご回答頂きましてありがとうございます。手法は理解できました。
しかしながら、私のプログラミングにおける基礎的な知識、能力が欠如しておりまして...
$("textarea").val(now.toLocaleString())
...略...
});
こちらを以下のように使った所、次のエラーが出ました。。
$(document).ready(function(){
$("#text_area").val(now.toLocaleString()); ←追加分
以下、記載のコードと同様になります。
＜エラー内容＞
Uncaught ReferenceError: now is not defined(anonymous function)
html:67j @ jquery-2.1.3.min.js:2fireWith @ jquery-2.1.3.min.js:2ready @ jquery-2.1.3.min.js:2I @ jquery-2.1.3.min.js:2
恐らく些細な文法ミスだと予測しますが... 自力で色々試してみても上手くいかず詰まっています。教えて頂いた事を実践したいので、頑張って解決します。
To: KyoheiTsunoさん
下記のようにしてみてください。
$(document).ready(function(){
var now = new Date();
$("#text_area").val(now.toLocaleString());
度々恐れ入ります。ご回答頂きましてありがとうございます。
コンソールエラーは消えましたが、テキストボックスに表示はされませんでした...
placeholder="キーワードを入力" の部分を削除してリトライしてみても
何も出てきませんでした。html内のscript記述位置が関係しているかもしれませんので、
入れ替えを試してみます。
あなたの回答
tips
プレビュー
