HTMLタブに下のコードを貼り付けてください。
<button id="countBtn">刻む（+1）</button>
<p id="display">0</p>
JSタブに下のコードを貼り付けてください。
let count = 0;
const btn = document.querySelector('#countBtn');
const display = document.querySelector('#display');
btn.addEventListener('click', function() {
count = count + 1;
display.textContent = count;
});
ボタンをクリックして、数字が1ずつ増えることを確認してください。
let count = 0：箱を用意するlet count = 0;
「count という名前の箱を用意して、0 を格納する」という意味です。
let は「新しい箱を用意する」という宣言です。const と似ていますが、let は後から値を格納し直すことができる箱、const は格納し直すことができない箱です。
count = count + 1：箱に格納されている数字を格納し直すcount = count + 1;
「今の箱（count）に入っている数字を取り出して、そこに1を足した数字を箱に格納し直す」という意味です。
最初は0が格納されているので 0 + 1 = 1 になります。次は1が書いてあるので 1 + 1 = 2 になります。これが押すたびに繰り返されます。
display.textContent = count：箱に格納されている数字を画面に映すdisplay.textContent = count;
「箱（count）に格納されている数字を、display（画面の文章）に表示する」という意味です。
変える場所は1行だけです。
count = count + 1; ← ここの「1」を変える
1 を 2 に変えてください。変更後はこうなります：
count = count + 2;
数字を0に戻すボタンを追加します。
ステップ1：HTMLにリセットボタンを追加する
今あるHTMLの下に、下の1行を追加してください。
<button id="resetBtn">リセット</button>
ステップ2：JSにリセットの動作を追加する
今あるJSの最後（}); の下）に、下のコードを追加してください。
const resetBtn = document.querySelector('#resetBtn');
resetBtn.addEventListener('click', function() {
count = 0;
display.textContent = count;
});
リセットボタンが押されたとき何が起きているか読み解くと：
count = 0 → 箱に0を格納し直すdisplay.textContent = count → 箱の中の0を画面に映すカウントアップのときと同じ仕組みです。