指定した時間になったらメッセージを表示したい

Question

前提・実現したいこと

デジタル時計を表示して指定した時間になったらメッセージを表示したい。

function clock_digital(){
// Dateオブフェクトから現在日時を表すインスタンスを取得
var today = new Date();
// 年月日取得
var year = today.getFullYear();

var month = today.getMonth() + 1;

var day = today.getDate();
// 時分秒取得
var hour = today.getHours();

var minute = today.getMinutes();

var second = today.getSeconds();
// 曜日の配列を用意して、getDateで得たインデックで曜日を取得
var weeks = new Array('日', '月', '火', '水', '木', '金', '土');

var week = weeks[today.getDay()];

　//常に2ケタ表示にする為の設定
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
if (minute < 10) minute = "0" + minute;
if (second < 10) second = "0" + second;

　//取得した要素にinnnerHTMLで文字列を挿入
document.getElementById("clock_date").innerHTML = year + "/" + month + "/" + day + "(" + week +")";
document.getElementById("clock_time").innerHTML = hour + ":" + minute + ":" + second;

var jikan = hour + ":" + minute + ":" + second;
var h = document.getElementsByClassName('h');　←ここが定義されていないと出る

if(jikan === "14:54:40"){
if(h.style.visibility === "hidden"){
h.style.visibility = "visible";
}else{
h.style.visibility = "hiddden";
}
}
}
// 1000ミリ秒(1秒)毎にclock関数を実行
setInterval(clock_digital, 1000);

指定した時間になったら非表示にしているメッセージを表示させるプログラムを書きたいのですが、変数hが上手く定義されないというエラーが出てしまいます。
Uncaught Type Error: Cannot read property 'visibility' of undefined
このような場合はどうやって定義すればいいのでしょうか？

Answer 1

「指定された時間」とはクライアント側の時計の時間になってしまうので
ちゃんとやるならサーバーに現時刻を返すapiを設置する必要がありそうですね
あまり頻度多くapi叩かれないようチェック感覚を数分間隔する工夫が必要そうです

Comments

[koni01]

今回の場合はif文で指定した時刻と同じ場合メッセージを表示させたいのですが、できなくて、、。
やり方やアドバイスをいただけるとありがたいです。

[yambejp]

クライアント側の時計で大丈夫ということですか？
（ユーザーが不正に時間をコントロールできる可能性がありますが・・・）

[koni01]

今回はとりあえずif文の条件が一致すれば表示させてみる物が作りたいのですが、エラーが出てしまっていて。。

[yambejp]

以下のようにしてみてください

[yambejp]

<script>
function clock_digital(){
var targettime="17:00:00";
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var weeks = new Array('日', '月', '火', '水', '木', '金', '土');
var week = weeks[today.getDay()];
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
if (minute < 10) minute = "0" + minute;
if (second < 10) second = "0" + second;
document.getElementById("clock_date").innerHTML = year + "/" + month + "/" + day + "(" + week +")";
document.getElementById("clock_time").innerHTML = hour + ":" + minute + ":" + second;
var jikan = hour + ":" + minute + ":" + second;
document.querySelectorAll('.h').forEach(h=>{
if(jikan >= targettime){
h.style.visibility = "visible";
}else{
h.style.visibility = "hidden";
}
});
}

window.addEventListener('DOMContentLoaded', ()=>{
setInterval(clock_digital, 1000);
});
</script>
<span id="clock_date"></span>
<span id="clock_time"></span>
<span class="h">h1</span>
<span class="h">h2</span>
<span class="h">h3</span>

[koni01]

動きました。本当にありがとうございます。

[koni01]

document.querySelectorAll('.h').forEach(h=>{
if(jikan >= targettime){
h.style.visibility = "visible";
}else{
h.style.visibility = "hidden";
}
});
}
この部分について質問なのですが、document.querySelectorAll('.h')で取得した要素を変数hに代入しているといったイメージでいいのでしょうか？
たびたびの質問ですみません。

Answer 2

コードのすべてを見てはいませんが
var h = document.getElementsByClassName('h');　
を↓
var h = document.getElementsByClassName('h')[0];
にしたらできませんか？