JS動かない、is not defined...

コード

<html lang="ja">
<head>
<meta charset="uft8">
<title>time</title>
</head>
<body>
<?php
try {
  $db = new PDO('mysql:dbname=bulletinboard;host=127.0.0.1;charset=utf8','root', '' );
}
catch (PDOException $e) {
  echo "データベース接続エラー　：".$e->getMessage();
}
$records = $db->query('SELECT * FROM chat WHERE id=5 ');
$record = $records->fetch();
$day=0;
$hour=0;
//簡易タイマーPHP（指定した日時～日時までの期間だけ表示します）
//設置するページの拡張子は必ず.phpとなっている必要があります。
//表示開始日時（この日時になったら表示されます）
//※日時のフォーマットは必ず「2021-05-17 08:00:00」のようにしてください。
$startDate = $record['modified'];
$datetime = $startDate;

list($year, $month, $day, $hour, $minute, $second) = preg_split('/[-: ]/', $datetime);
function time_change($hour, $day, $month, $year)
{ if ($hour>24) {
        $hour-= 24;
        $day += 1;
        switch ($day>=28) {
   case $month= 1:{ if ($day>31) {
       $day-= 31;
       $month+= 1;
   }}
   break;
case $month =2:{ if ($day>28) {
    $day-= 28;
    $month+= 1;
}}
   break;
   case $month=3:
case $month=5:
   case $month=7:
      case $month=8:
         case $month=10:{ if ($day>31) {
    $day-= 31;
    $month+= 1;
}}
   break;
   case $month=4: { if ($day>30) {
       $day-= 30;
       $month+= 1;
   }}
   break;
case $month=6:{ if ($day>30) {
    $day-= 30;
    $month+= 1;
}}
   break;
case $month=9:{ if ($day>30) {
    $day-= 30;
    $month+= 1;
}}
   break;
case $month=11: { if ($day>30) {
    $day-= 30;
    $month+= 1;
}}
   break;
case $month=12: { if ($day>31) {
    $day-= 31;
    $month-= 11;
    $year+=1;
}}
   break;
   default:
      break;
}
    }
}
if($record['time_limit'] == '2hours'){$hours= 02; $hour+= $hours; time_change($hour, $day, $month, $year);}
elseif($record['time_limit'] == '6hours'){$hours = 06; $hour+= $hours; time_change($hour, $day, $month, $year);}
elseif($record['time_limit'] == '1day'){$days = 01; $day += $days;time_change($hour, $day, $month, $year);}
elseif($record['time_limit'] == '3day'){$days = 03; $day += $days;time_change($hour, $day, $month, $year);}
elseif($record['time_limit'] == '5day'){$days = 05; $day += $days;time_change($hour, $day, $month, $year);}
elseif($record['time_limit'] == '1week'){$days = 07; $day += $days;time_change($hour, $day, $month, $year);}
elseif($record['time_limit'] == '2week'){$days = 14; $day += $days; time_change($hour, $day, $month, $year);}
date_default_timezone_set('Asia/Tokyo');//タイムゾーン （日本以外の場合には適宜設定ください）

//表示終了日時（この日時になったら非表示になります）
//※日時のフォーマットは必ず「2021-05-17 08:00:00」のようにしてください。
$setDate = strtotime("$year-$month-$day $hour:$minute:$second");
$endDate = date('Y-m-d H:i:s', $setDate);

if(date('Y-m-d H:i:s') >= $startDate && date('Y-m-d H:i:s') < $endDate){
?>
<script type="text/javascript">

window.onload =function showCountdown() {
   var dnumTarget =<?php echo $endDate; ?>;
   var dnumNow = <?php echo $startDate?>;
   var diff2Dates = dnumTarget - dnumNow;
   if( dnumTarget < dnumNow ) {
      // 期限が過ぎた場合は -1 を掛けて正の値に変換
      diff2Dates *= -1;
   }
   var msg1 = "期限の<?php echo $endDate; ?>";
   // 差のミリ秒を、日数・時間・分・秒に分割
   var dDays  = diff2Dates / ( 1000 * 60 * 60 * 24 );   // 日数
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 * 24 );
   var dHour  = diff2Dates / ( 1000 * 60 * 60 );   // 時間
   diff2Dates = diff2Dates % ( 1000 * 60 * 60 );
   var dMin   = diff2Dates / ( 1000 * 60 );   // 分
   diff2Dates = diff2Dates % ( 1000 * 60 );
   var dSec   = diff2Dates / 1000;   // 秒
   var msg2 = Math.floor(dDays) + "日"
            + Math.floor(dHour) + "時間"
            + Math.floor(dMin) + "分"
            + Math.floor(dSec) + "秒";
   // 表示文字列の作成
   var msg;
   if( dnumTarget > dnumNow ) {
      // まだ期限が来ていない場合
      msg = msg1 + "までは、あと" + msg2 + "です。";
   }
   else {
      // 期限が過ぎた場合
      msg = msg1 + "は、既に" + msg2 + "前に過ぎました。";
   }
   // 作成した文字列を表示
   document.getElementById("RealtimeCountdownArea").innerHTML = msg;
}
// 1秒ごとに実行
setInterval('showCountdown()',1000);
</script>
<?php } ?>### ヘディングのテキスト
<input  type=button onclick="showCountdown();" >
<p id="RealtimeCountdownArea">This note is written !</p>
<p><?php echo $endDate?></p>
</body>
</html>

前提・実現したいこと

PHP、html、JSを使いjQueryは使わないファイルを作成しています。
PHPでDBから時間を読み込んでJSで動的にページにカウントダウンをしている最中です。

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

 Uncaught ReferenceError_ showCountdown is not defined    at HTMLInputElement.onclick が直らないです治らないです。

行動規範の内容に同意します

回答1件

showCountdownがwindow.loadの中でしか定義されてないので、onclickなどで呼び出せないのだと思います。まずは関数をグローバル領域で定義してあげて、各トリガーで呼び出してあげれば良いかと思います。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <script>
9        function hoge() {
10            console.log('ほげ')
11        }
12        window.onload = hoge;
13        setInterval(hoge,1000);
14    </script>
15</head>
16<body>
17    <button type="button" onclick="hoge()">hoge</button>
18</body>
19</html>