私のコードがJavaScriptでこの値を1回だけ出力している理由

2020-08-01 javascript

function increase1() {
  var a = document.getElementById('increase').value;
  ++a
  document.getElementById('counter').innerHTML = a
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Counter app</title>
</head>

<body>
  <p id="counter" value="0">0</p>
  <br>
  <button id="increase" onclick="increase1()">increase</button><br><br>
  <button id="decrease">decrease</button>
</body>
<script src="app.js"></script>

</html>

これは私が事前にインクリメントしたコードです。確認してください。このコードの何を変更すればよいか確認してください。

Answers

var a = document.getElementById('increase').value;

新しい値を取得しないでください

var a = parseInt(document.getElementById('counter').innerHTML);

カウンタの値をフェッチし、インクリメント/デクリメントしてから、カウンタの値を更新する必要があります。 以下の更新されたコードを見つけてください

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Counter app</title>
    <script>
      function increase1() {
        let counterElement = document.getElementById("counter");
        let count = parseInt(counterElement.value);
        counterElement.value = ++count;
      }
    </script>
  </head>
  <body>
    <input id="counter" type="number" value="0" />
    <br />
    <button id="increase" onclick="increase1()">increase</button><br /><br />
    <button id="decrease">decrease</button>
  </body>
  <script src="app.js"></script>
</html>

同様に、デクリメントのための関数を書くことができます。

問題であるボタンから価値を得ている

var a = document.getElementById('increase').value;

このような現在のカウンター値を取得する必要があります。

var a = document.getElementById('counter').innerHTML; 

カウンター値の増分と減分については、以下の実行可能なコードを参照してください。

function increase1() {
  var a = document.getElementById('counter').innerHTML;
  document.getElementById('counter').innerHTML =  ++a;
}
function decrease1() {
  var a = document.getElementById('counter').innerHTML;
  document.getElementById('counter').innerHTML = --a;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Counter app</title>
</head>

<body>
  <p id="counter" value="0">0</p>
  <br>
  <button id="increase" onclick="increase1()">increase</button><br><br>
  <button id="decrease" onclick="decrease1()">decrease</button>
</body>
<script src="app.js"></script>

</html>

Related