経過時間表示（onclick）とid設定

Question

私はゲームを作っています。タイピングゲームなのですが、ゲーム本体の実装はできました。
しかし、ランキングを作ろうとしているのですが、さまざまなエラーが発生してしまいます。
以下に私の実現させたいことと、これまだの編集の経緯をご説明しますので、最後に記す質問にお答えいた抱きたいです。

＊実現したい内容＊

• ランキングの生成（5位まで）→下のJSではすでに完成している。
• タイマーの可視化

＊ゲームの流れ＊

html内にある指定されたボタンをクリック
↓
名前を入力
↓
ゲーム開始（裏でタイマーが作動）
↓
ゲーム終了
（タイマーが停止し、ランキングを表示して終了）

＊初期のデメリット＊

・タイマーが表示されないため、自分が実際にどのくらいの時間かかっているかはわからない。
→タイマーの可視化によってかかった時間を表示させたい

※具体的に言うと・・・
html内にある指定されたボタンをクリック
↓
名前を入力
↓
ゲーム開始＋**タイマーを表示＆カウント開始**
↓
ゲーム終了
（タイマーが停止し、ランキングを表示し直して終了）

＊JavaScript（初期）＊

<script>
  var r=[
  ['59:59.95','abc'],
  ['59:59.96','xyz'],
  ['59:59.97','ijk'],
  ['59:59.98','aaa'],
  ['59:59.99','zzz'],
  ];
  var qs=[
    'q1',
    'q2',
  ];
    const viewRank=()=>{
      document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
      };
      window.addEventListener('DOMContentLoaded',()=>{
      viewRank();
      document.querySelector('#start').addEventListener('click',e=>{
        const t1=e.target;
        const t2=document.querySelector('#a');
        t1.disabled=true;
        t2.disabled=false;
        const name=prompt("お名前を入力してください。");
        if(name=="") name="UnKnown";
        (async()=>{
          const s=new Date().getTime();
          for(var i=0;i<qs.length;i++){
            const qStr=qs[i];
            document.querySelector('#q span').textContent=qStr;
            t2.value="";
            t2.focus();
            await new Promise(resolve=>{
              const timerId=setInterval(()=>{
                if(t2.value==qStr){
                  clearInterval(timerId);
                  resolve();
                  }
                  },10);
                  });
                  }
                  const e=new Date().getTime();
                  const diff=e-s;
                  const str=(10000+diff/1000).toString();
                  const time=str.substr(1,2)+":"+
                  str.substr(3,5);
                  r.push([time,name]);
                  r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                  viewRank();
                  t1.disabled=false;
                  t2.disabled=true;
                  })();
                  });
                  });
</script>
<input type="button" value="ゲームスタート！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<table border="1">
<tr>
<td>
<div id="rank">現在のランキングトップ５<br>
    <center><span></span></center>
</div>
  </td></tr></table>

＊JavaScript（現状）＊

<script>
var r=[
  ['59:59.95','abc'],
  ['59:59.96','xyz'],
  ['59:59.97','ijk'],
  ['59:59.98','aaa'],
  ['59:59.99','zzz'],
  ];
  var qs=[
    'q1',
    'q2',
  ];
    const viewRank=()=>{
      document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
      };
      window.addEventListener('DOMContentLoaded',()=>{
        viewRank();
        document.querySelector('#start').addEventListener('click',e=>{
          const t1=e.target;
          const t2=document.querySelector('#a');
          t1.disabled=true;
          t2.disabled=false;
          const name=prompt("お名前を入力してください。");
          if(name=="") name="UnKnown";
          (async()=>{
            const s=new Date().getTime();
            for(var i=0;i<qs.length;i++){
              const qStr=qs[i];
              document.querySelector('#q span').textContent=qStr;
              t2.value="";
              t2.focus();
                await new Promise(resolve=>{
                  const timerId=setInterval(()=>{
                    if(t2.value==qStr){
                      clearInterval(timerId);
                      resolve();
                      }
                      },10);
                      });
                      }
                      const e=new Date().getTime();
                      const diff=e-s;
                      const str=(10000+diff/1000).toString();
                      const time=str.substr(1,2)+":"+
                      str.substr(3,5);
                      r.push([time,name]);
                      r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                      viewRank();
                      t1.disabled=false;
                      t2.disabled=true;
                      })();
                      });
                      });
</script>
<input type="button" value="ゲームスタート！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<br>
<br>
<script>
    document.getElementById("start").onclick = function() {
                                            PassSec = 0;
                                            PassageID = setInterval('showPassage()',1000);
                                            document.getElementById("start").disabled = true;
                                            };
</script>
<br>
<br>
<table border="1">
    <tr>
        <td>
            <div id="rank">現在のランキングトップ５<br>
                <center><span></span></center>
            </div>
        </td>
    </tr>
</table>

＊現状の問題点＊

タイマーが表示されるように修正しようとしましたが、どこにクリック部分のidを設定したいいのかわかりませんでした。きっとidが設定されることで表示できると思います。
万が一idを設定できない環境である場合、どのようにしたらいいかなども教えてください。

Comments

[m.ts10806]

インデントぐちゃぐちゃなので直した方が良いのと
JavaScriptだけでは「自分自身」のランキングしかできません。
しかも現状のコードだとWebStorageに保存しているわけではないので、
再アクセスするとランキングなどはリセットされます。
タイマーの表示くらいでしたらそこまで難しくはないでしょうけど、
もう少し設計部分をしっかり詰められた方がこの先困らなくて済むと思います。

[退会済みユーザー]

ランキングのほうも検討しております。（実を言うと別で質問しております。）
インデントは急いでいたためにぐちゃぐちゃになってしまいました。気を付けます。

[m.ts10806]

インデントは手元のコードを修正し、反映しておいてください。
こちらは誰も急いでいないので、そこは丁寧にされたほうが良いです。急いだところで問題が大きくなるだけなので。
それに・・・以前の質問の回答が無駄になっているような。（すでに回答してコメントに書いています）

Answer 1

現状の質問内容から推測される回答になります。質問内容が明確になり次第、再度調整します。

const timer = document.getElementById('timer');
const start = document.getElementById('start');
let counter = 0;
const showPassage = () => {
  counter++;
  timer.innerText = counter + "sec";
};
start.onclick = () =>{
  setInterval(showPassage, 1000);
  start.disabled = true;
};

デモページ

タイマーを表示したいのであれば、ただ単にタイマーを表示する要素に対して現在のカウントを付与すればいいのでは？

Answer 2

<form action="#" name="form1">
経過時間：<input type="text" name="field1" size="8" ></input> 
<input type="button" value="スタート" onclick="start=new Date(); disp();" ></input><br></form>
<script type="text/javascript">
// 初期化
var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;
function disp(){
now = new Date();
datet = parseInt((now.getTime() - start.getTime()) / 1000);//現在時刻-クリック時刻
hour = parseInt(datet / 3600);
min = parseInt((datet / 60) % 60);
sec = datet % 60;
// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }
var timer1 = hour + ':' + min + ':' + sec;
document.form1.field1.value = timer1;
setTimeout("disp()", 1000);
}
</script>

これで解決しました。