ボタンを押したら数字が入力されるコードの実装
Q&A
Closed
### 解決したいこと
html に「00:00」 という表示と、
数字を入力するための 「1」「2」「3」 「4」「5」「6」 「7」 「8」「9」 「0」というボタンを準備した状態で、
「1」を押せば「00:01」、
「1」「2」 」と押せば「00:12」、
「1」「2」「3」 「4」「5」と押すと「12:34」 と表示される(「5」は無視される)ような
html、javascriptはどのようなコードを書けばいいのでしょうか?
html内にidをつけ、Javascriptには getElementByIdでidを取ってきて、addEventListener の 「クリックしたときに」、
という流れでコードを書けばいいの かなと考えているのですが、console.logに出すことはできても数字が上書きされるようにできません。
ひとまずjavascriptでは数字ボタンの1を入力した場合を載せております。
美しくないコードで構いません。
onclick, jQueryは使わずにしたいのですが、 実装可能でしょうか?
ご教授いただければと思います。
該当するソースコード
ソースコードを入力
```<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<body>
<div id="output">00:00</div>
<script src="js/timer.js"></script>
<form>
<input type="button" id="number1" value="1">
<input type="button" id="number2" value="2">
<input type="button" id="number3" value="3"><br>
<input type="button" id="number4" value="4">
<input type="button" id="number5" value="5">
<input type="button" id="number6" value="6"><br>
<input type="button" id="number7" value="7">
<input type="button" id="number8" value="8">
<input type="button" id="number9" value="9"><br>
<input type="button" id="stopresetBtn" value="STOP/RESET">
<input type="button" id="number0" value="0">
<input type="button" id="startBtn" value="START">
</form>
</body>
</head>
</html>
const btnOne = document.getElementById('number1');
btnOne.addEventListener('click', () => {
console.log('1');
});
### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。