JavaScript 入力した数字が加算減算処理され表示されるカウンター

初心者です。
テキストボックスに入力された数字をボタンで加算または減少させたいです。
途中まで書いてみたのですが、加算減算はどのように記述したら良いでしょうか。
アドバイスいただけますと幸いです。

HTML
1<html>
2<head>
3    <meta charset="UTF-8">
4    <title>hello</title>
5    <link rel="stylesheet" href="style.css">
6    <script defer src="script.js"></script>
7</head>
8<body>
9  <div class="spinner_area">
10      <p id="counter" type="number">0</p>
11      <input type="button" value="＋" class="btnspinner" data-cal="1" data-target=".counter1" id="up">
12      <input type="number" value="1" class="counter1" data-max="500" data-min="0" id="textbox">
13      <input type="button" value="－" class="btnspinner" data-cal="-1" data-target=".counter1" id="down">
14  </div>
15</body>
16</html>
17

JavaScript
1(() => {
2  //DOM要素を取得
3  const downbutton = document.getElementById('down');
4  const upbutton = document.getElementById('up');
5  const text = document.getElementById('textbox');
6  const counter = document.getElementById('counter');
7  const val = parseInt(document.querySelector('input.valueInputField').value, 10);
8  
9  //マイナスボタンが押されたら減算
10  downbutton.addEventListener('click', (event) => {
11　　　　　　　　？  
12  }
13  });
14
15  //プラスボタンが押されたら加算
16  upbutton.addEventListener('click', (event) => {
17 　　　　　　？
18  })
19
20  counter(){
21    document.getElementById('counter').innerHTML
22  }
23  
24
25})();

行動規範の内容に同意します

回答2件

#counter を<input type=number>にするとシンプルになるのではないでしょうか。

html
1<input id="counter" type="number" min="0" max="500" value="0" readonly style="border:none; background:transparent;">

こうすると、ボタンクリック時は、counter.stepDown(text.valueAsNumber) counter.stepUp(text.valueAsNumber) でよいです。

投稿2021/06/03 00:15

編集2021/06/03 00:24

int32_t

総合スコア21695

ベストアンサー

DOMを掴むならDOMContentLoadedを待ってから
あとは元ソースに準ずるとこんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const downbutton = document.querySelector('#down');
4  const upbutton = document.querySelector('#up');
5  const text = document.querySelector('#textbox');
6  const counter = document.querySelector('#counter');
7  downbutton.addEventListener('click', (event) => {
8    counter.textContent=parseInt(counter.textContent)-parseInt(text.value);
9  });
10  upbutton.addEventListener('click', (event) => {
11    counter.textContent=parseInt(counter.textContent)+parseInt(text.value);;
12  });
13});
14</script>
15<div class="spinner_area">
16      <p id="counter" type="number">0</p>
17      <input type="button" value="＋" class="btnspinner" data-cal="1" data-target=".counter1" id="up">
18      <input type="number" value="1" class="counter1" data-max="500" data-min="0" id="textbox">
19      <input type="button" value="－" class="btnspinner" data-cal="-1" data-target=".counter1" id="down">
20  </div>
21