パラメータをファンクション内のgetElementByIdに代入してsetTimeoutで繰り返し表示させたいです。

Question

前提・実現したいこと

Javascript見習いです。

カウントダウンタイマーを作成しており、ファンクション内のdocument.getElementByIdのid名にそのファンクションのパラメータを代入したいのですが、うまくいきません。
自分なりに解決策を調べてみたのですが、どういったワードで検索していいかもいまいちわからず解決に至ることができませんでした。

変数の命名規則などあまり分かっておらず見づらいかもしれません。
また、既存の質問であるかもしれませんがお教えいただければ幸いです。

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

1776日 00時間 17分 23秒
question.js:26 Uncaught TypeError: Cannot read property '0' of undefined
    at recalc (question.js:26)
recalc	@	question.js:26
setTimeout (async)		
refresh	@	question.js:34
recalc	@	question.js:30
(anonymous)	@	question.js:3

該当のソースコード

function countdown(due) {
  const now = new Date();
  const rest = due.getTime() - now.getTime();
  const sec = Math.floor(rest / 1000) % 60;
  const min = Math.floor(rest / 1000 / 60) % 60;
  const hours = Math.floor(rest / 1000 / 60 / 60) % 24;
  const days = Math.floor(rest / 1000 / 60 / 60 / 24);
  function plusZero(value) {
    let zero = '';
    if(value < 10) {
      zero = `0${value}`;
    } else {
      zero = value;
    }
    return zero;
  }
  const count = [days, plusZero(hours), plusZero(min), plusZero(sec)];
  return count;
}

let osakaGoal = new Date(2025, 4, 13, 0, 0, 0);

let osakaCounter = countdown(osakaGoal);

function recalc(counter, getid) {
  const timer = `${counter[0]}日 ${counter[1]}時間 ${counter[2]}分 ${counter[3]}秒`;
  console.log(timer);
  document.getElementById(getid).textContent = timer;

  refresh();  
}

function refresh() {
  setTimeout(recalc, 1000);
}

const osakaId = 'countdownOsaka';
recalc(osakaCounter, osakaId);

試したこと

34行目のconsole.logでは時間の計算ができていました。

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

最新のものを使用しております。

Comments

[sousuke]

最終行のcountdownOsakaはどこから来たんですか？

[hhio67]

htmlのid属性の値です。
coundownOsakaのspanタグに表示させようと思っています。

[sousuke]

countdownOsakaは変数で提示はされていませんが
var countdownOsaka= "ID属性の値"
みたいにどこかでしてあるということですか？

[hhio67]

いえ、してないです。
引数にid属性の値を与えたい場合はそのような処理が必要なのでしょうか？

[sousuke]

必要も何も
const byId = document.getElementById(getid);
としている以上
recalcの引数getidに文字列が入らないといけませんよね？

[hhio67]

申し訳ありません、ソースコードを間違えていました。訂正します。

Answer 1

function recalc(counter, getid) {

定義では2つの引数を求めているが

setTimeout(recalc, 1000);

何も渡していない。
当然、getElementById()も正しい情報を取得しない。

引数与えたいのでしたら、それなりのやり方をする必要があります。
下記参考にしてください。
setInterval()やsetTimeout()で関数に引数を与えるには
setTimeout、setIntervalでコールバックに引数を渡したい！

Comments

[hhio67]

回答ありがとうございます。
参考にさせていただき、やってみます。