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

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

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

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

Q&A

解決済

1回答

1954閲覧

【javascript】function内の値がfunction外で使えない【Daterange Picker】

el__ninja

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2016/12/21 09:49

編集2016/12/21 10:24

daterangepickerを使ってカレンダーから日付を選択し、inputのvalueを書き換えようとしています。

html

1<input name="daterange" type="text" value="2017" class="datepicker form-control align-center"> 2 <input id="daterange-year" type="hidden" name="obj_year" value="2017"> 3 <input id="daterange-month" type="hidden" name="obj_month" value="6"> 4 <input id="daterange-day" type="hidden" name="obj_day" value="30"> 5

javascript

1$('input[name="daterange"]').daterangepicker( 2{ 3 locale: { 4 format: 'YYYY-MM-DD' 5 }, 6 startDate: '2016-12-21', 7 endDate: '2016-12-22' 8}, 9 10function(start, end, label) { 11 console.log(start.format('YYYY')); 12});

このファンクション内ではconsole.logにちゃんと2017といったような、選択した値が表示されますが、

javascript

1$('input[name="daterange"]').daterangepicker( 2{ 3 locale: { 4 format: 'YYYY-MM-DD' 5 }, 6 startDate: '2016-12-21', 7 endDate: '2016-12-22' 8}, 9 10function(start, end, label) { 11}); 12console.log(start.format('YYYY'));

ファンクションの外だと表示されません。

最終的に、カレンダーで選択した値をinputのvalueに入れたいので、

javascript

1$('input[name="daterange"]').daterangepicker( 2{ 3 locale: { 4 format: 'YYYY-MM-DD' 5 }, 6 startDate: '2016-12-21', 7 endDate: '2016-12-22' 8}, 9 10function(start, end, label) { 11document.getElementById('daterange-year').value = start.format('YYYY'); 12}); 13

のような形で書き換えを行えれば、と思ったのですが、
ファンクションの外にあるせいか、できません。。

どなたかご教授いただけませんでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

daterangepicker は詳しくないですが、公式のサンプルを見た感じではユーザが日付の範囲を選択肢決定したときにその関数が実行されるようです

最後の

function(start, end, label) { document.getElementById('daterange-year').value = start.format('YYYY'); }

は関数の中にあるので選択後に実行されてるように見えますが

ファンクションの外にあるせいか

とはどういうことでしょうか?

document.getElementById('daterange-year') で input が取得できていれば問題なさそうに見えますけど

投稿2016/12/21 11:31

lazex

総合スコア604

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

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

el__ninja

2016/12/21 11:44

ファンクションの外といのは、 <input id="daterange-year" type="hidden" name="obj_year" value="2017"> がファンクションの外に書いてあるので、書き換えが行われないのではないかと推測しました。 というのも console.log(start.format('YYYY')) をファンクションの外に書くと、 コンソールログに表示されていないので。 大変わかりにくい表現で申し訳ありません。。
lazex

2016/12/21 11:58

HTML は中に書く必要ないですよ console.log が出力されないのは、 関数の中はユーザが日付を選んでから実行されるからで、関数の外だとユーザが選ぶ前に実行されます 関数の中で HTML の daterange-year に値を入れるということを書いていればいいです 上のコードで動いていないのだとしたら document.getElementById('daterange-year') で正しく値が取れていないのだと思いますが ID のミスとかはありませんか コンソールにエラーはありませんか?
el__ninja

2016/12/21 12:11

function(start, end, label) { document.getElementById('daterange-year').value = start.format('YYYY'); console.log(start.format('YYYY')) }); としてみたところ、コンソールログには値が表示されるのみで、 valueは書き換わらず、コンソールログにエラーはでておりません。 idの値をあえてhtmlのidと変えてみてもエラーはでない状態になっております。
lazex

2016/12/21 12:28

それで console に値がでているならその上の getElementById で null が返ってきている可能性はないですね console.log(document.getElementById('daterange-year')) で思いどおりの input が取れているか確認してみてはどうでしょうか 別のところが変わってる、または input じゃないので value かえても変化なしという場合も考えられます console.log ででてきた要素にマウスカーソルを乗せれば画面ないのどの要素かというのがわかります あとは変わっているけど別の処理で更に上書きされている可能性もあります 関数の中を ``` document.getElementById('daterange-year').value = start.format('YYYY'); debugger console.log(start.format('YYYY')) ``` として input 直後に一時停止させて画面の値を確認してみることもやってみてはどうでしょうか
lazex

2016/12/21 12:47

私の方でも試してみたのですが、動いてはいますが、 type="hidden" があるので input は見えていません もしかするとコレが原因でしょうか
el__ninja

2016/12/22 09:55

返信遅くなりましてすいません。 type="hidden" を type="text"に変更したのですが、 書き換えが行われません。。
el__ninja

2016/12/25 05:37

lazexさん。。わざわざありがとうございます。。 私の方では動かないです。。 ブラウザはChrome,Firefoxを試しましたが、 2016/6/30の値から変わりません。
el__ninja

2016/12/25 06:08 編集

すいません!動きました! 本番環境でも試してみます!ありがとうございます! 読み込む順番が影響していたのかもしれません。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問