常連

注目の的

自己紹介

変数dをコンソールに表示してカウントアップする様にしたいのですが、NANと出てしまいます

変数dを使わなければ上手く行くのですが、どうして変数dを使うと上手くいかないのかが分かりません

詳しい方教えて頂けないでしょうか？

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="timer">00:00,000</div>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>



<script src="js/main.js"></script>
</body>
</html>
```

```javascript
'use strict';
{
  const timer=document.getElementById('timer');
  const start=document.getElementById('start');
  const stop=document.getElementById('stop');
  const reset=document.getElementById('reset');
}


let startTime;

let elapsedTime;

let d=elapsedTime-startTime;

start.addEventListener('click' , ()=>{

  startTime=Date.now();
  
  countUp();

  })

  function countUp(){
 
    elapsedTime=Date.now();
    
       console.log(d);
    
      setTimeout(countUp , 10);

    }

```

javascriptで作ったタイマーが動作しません

### 前提・実現したいこと
現在ポートフォリオを作成中で、ハンバーガーメニューを入れようとしています。

### 発生している問題・エラーメッセージ

ハンバーガーメニューの表示までは出来たのですが、問題が2つ起きて止まっています。
①ページ内リンクを付けたいのに、リンクを付けてもリンク化されない。
②現在左上に表示されているハンバーガーメニューを、右上に移動したいのですが、そうすると中身が表示されなくなってしまいました。

### 該当のソースコード


html
```
 <span class="nav_toggle">
        <i></i>
        <i></i>
        <i></i>
    </span>
    <nav class="nav">
        <ul class="nav_menu_ul">
            <li class="nav_menu_li"><a href="#profile">About</a></li>
            <li class="nav_menu_li"><a href="#skill">Skill</a></li>
            <li class="nav_menu_li"><a href="#price">Price</a></li>
            <li class="nav_menu_li"><a href="#contact">Contact</a></li>
        </ul>
    </nav>
```
css
```
/* hamburger menu */
.nav_toggle {
  display: block;
  position: relative;
  width: 1.75rem;
  height: 1.5rem;
}
.nav_toggle i {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  position: absolute;
  transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) {
  top: 0;
}
.nav_toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
.nav_toggle i:nth-child(3) {
  bottom: 0;
}
.nav_toggle.show i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
  opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}
.nav {
  position: fixed;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}
.nav.show {
  opacity: 1;
  visibility: visible;
}
.nav_menu_li a{
  color:black;
  text-decoration: none;
  cursor: pointer;
}

```
jQuery
```

$('.nav_toggle').on('click', function () {
    $('.nav_toggle, .nav').toggleClass('show');
});
```
### 試したこと

ハンバーガーメニューを、marginを変えたりtop,rightの位置を変更したのですが、そうすると中身が表示されなくなってしまいます。
どなたか、ご教示願います。

ハンバーガーメニューを実装したいです。

エンジニアならこれは読んでおけ みたいな本を教えてください。
ほかにも読んですごく良かった本などでも知りたいです。

アルゴリズムの本や正規表現、TCP/IPなどなど
お願いします