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

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

ただいまの
回答率

87.61%

JavaScript: htmlタグの表示・非表示に関する処理

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 814

score 87

前提・実現したいこと

jsで三日前になるとhtmlタグを非表示にする処理を実現したいです。

発生している問題・エラーメッセージ

If文の条件の書き方が分からないです。

該当のソースコード

<p id="ptext">三日前に消えます<p>
window.onload = function(){
// ページ読み込み時に実行したい処理
  let Date = new Date();
  if (どのように書けばいいか分からない){
  document.getElementById("pext").style.display="block";
  } else {
  document.getElementById("ptext").style.display="none";
  }
}

補足情報(FW/ツールのバージョンなど)

javascript

追記

このpタグはサンプルで、具体的な実装はとしては練習でイベント掲載掲示板アプリを今作っていて、キャンセルボタンを開催当日の三日前から非表示にさせたいです。
誤解を招く、質問の仕方をしてしまい申し訳ございませんでした。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • papinianus

    2019/02/27 11:53

    過去質問を拝見すると、予約・カレンダーのキーワードがあるので、htmlになって表示されるレコードは例えばカレンダーの予定のようにそれ自身に日付情報を持つもの。
    ただし、宿の予約のように直前になると、(オンラインでは)予約できなくなるようなものとしたい。
    という意図で解釈してます。
    そもそものデータの表示部分か、DBからのデータの取得部分かが分からないと回答できないです。

    キャンセル

  • m.ts10806

    2019/02/27 13:19

    質問者さん
    どのように解決されたか回答にコメントを書かれた方が良いかと。
    今のコメントだと本当に解決したのか、理解したのか が分かりません。
    https://teratail.com/help/question-tips#questionTips4-2

    キャンセル

  • rails_ruby

    2019/03/01 18:37

    @mts10806さん
    返信遅くなり申し訳ございません。
    私の説明不足により、質問の意図が曖昧になってしまい申し訳ございませんでした。
    本質問の意図としては、イベント掲示板の掲載されている開催日程が3日前になった時にキャンセルボタンを非表示にしたく質問をさせて頂きました。
    そして解決した方法としては、@yambejpさんにご教示いただいた方法で解決する事ができました。
    ご迷惑をおかけして申し訳御座いませんでした。

    キャンセル

回答 2

checkベストアンサー

+3

なんの3日前かを指定する必要があるでしょう

sample

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var d1=new Date('2019-03-01');
  var d2=new Date();
  d2.setHours(0);
  d2.setMinutes(0);
  d2.setSeconds(0);
  var diff=parseInt((d1-d2)/60/60/24/1000);
  document.querySelector('#ptext').style.display=diff<3?"none":"";
});
</script>
test
<p id="ptext">三日前に消えます<p>
test


今日が19/2/27なら上記は消えます。
その上でd1の日付を3/2にすれば表示されます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/27 11:26

    今日の日付を基準に3日前からhtmlタグを非表示にしたいのですが、条件分岐をどのように書けばいいか分からないです。
    if (Date == ?)

    キャンセル

  • 2019/02/27 11:38

    その考え方は「明日になったら本気出す」理論ですね
    明日になった時点でまた「明日になったら」となるので
    永遠に実行されないというパターンです。
    なにか期日を指定してそことの差をとる必要があります

    キャンセル

  • 2019/02/27 12:11

    ご教示いただきありがとうございました。
    ご質問にも追記させていただいたのですが、イベント掲載掲示板アプリを練習で今作っていましてイベントの掲載日程から三日前になったらキャンセルボタンを非表示にしたいと考え、ご質問をさせた頂いたのですが誤解を招くようなご質問の仕方でご迷惑をおかけして申し訳ございませんでした。

    キャンセル

+2

おそらく伝え方の問題だとは思うのですが、
「ある目的とする日があって、今日がその日から3日前だったら表示切替をしたい」
という意味だと解釈しました。

ということは、今日からその日まで何日あるかわかればいいわけですよね。
東京オリンピック開幕式まで」とロジックは同じです。

その手のものは「日付の比較計算」のような形で沢山記事が出ています。
それらを参考にすれば実現できるのではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る