1. ホーム
  2. javascript

[解決済み] ボタンで数字を1つずつ上げる方法(Javascript)

2022-02-09 01:28:26

質問

javascriptについて非常に混乱しており、どのようにこの数字を上昇させるのか、もし教えていただけると助かります。(私はjavascriptに少し慣れていないので、これが意味をなさないなら申し訳ありません、もっと提供する必要があるならコメントで教えてください。)

コード

  <head>
    <div class="center">
      <h1 id="title">
        This number will increase.
      </h1>
      <p id="button">
        0
      </p>
      <a
        class="button"
        style="text-decoration: none; color: black; font-family: calibri;"
        id="numbergoup"
        onclick="myFunction()"
        >Number go up</a
      >
    </div>
    <script>
      function myFunction() {
   
      }
    </script>
    <style>
      #button {
        border-style: solid;
        padding: 20px;
      }
      div.center {
        text-align: center;
      }
      #numbergoup {
        background-color: tomato;
        padding: 20px;
        position: absolute;
        top: 20%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
</html>```


解決方法は?

このようにすればいいのです。

function myFunction(){
  const numberElement = document.getElementById("button");
  const number = parseInt(numberElement.innerText, 10) + 1;
  numberElement.innerText = number;
}
<button id="button">0</button>
<button onclick="myFunction()">Number go up</button>