如何使用按钮使数字上升一个（Javascript）答案

【问题标题】：How to make a number go up one with a button (Javascript)如何使用按钮使数字上升一个（Javascript）
【发布时间】：2021-07-26 11:22:12
【问题描述】：

我对 javascript 以及如何使这个数字上升感到非常困惑，如果你能告诉我它有多棒的话。（我对 javascript 有点陌生，如果这没有意义，请在 cmets 中告诉我是否应该提供更多信息，但那里的代码就是全部内容）

代码

  <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>```

【问题讨论】：

标签： javascript html css numbers var

【解决方案1】：

你可以这样做：

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>

【讨论】：

【解决方案2】：

这是你的整洁代码，你需要增加这个数字，如果你需要任何其他帮助，我会告诉我

<style>
html{
font-family: calibri;
}
  #button {
    border-style: solid;
    padding: 20px;
    color: black; 
  }
  div.center {
    text-align: center;
  }
  #increment {
    background-color: tomato;
    padding: 20px;
    position: absolute;
    top: 25%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #reset {
    background-color: yellow;
    padding: 20px;
    position: absolute;
    top: 35%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
</style>

<div class="center">
  <h1 id="title">
    This number will increase.
  </h1>
  <p id="button">
    0
  </p>
  <button
    class="button"
    id="increment"
    onclick="numberGoUp()"
    >Number go up</button
  >

  <button
    class="button"
    id="reset"
    onclick="reset()"
    >Reset</button
  >
</div>

<script>
  function numberGoUp() {
      const counter = document.querySelector('#button');
    let countValue = Number(counter.innerHTML);
    countValue++;
    counter.innerHTML = countValue;
  }
  function reset(){
      const counter = document.querySelector('#button');
    counter.innerHTML = 0;
  }
</script>

【讨论】：

【解决方案3】：

这应该是你要找的：

 <html>
 <head>
    <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>
<body>
    <div class="center">
    <h1 id="title">
        This number will increase.
    </h1>
    <p id="number">0</p>
    <button
        class="button"
        style="text-decoration: none; color: black; font-family: calibri;"
        id="numbergoup"
        onclick="myFunction()"
        >Number go up</button>
    </div>
</body>

<script>
    function myFunction() {
        var numberValue = document.getElementById('number').innerHTML;
        numberValue++;

        document.getElementById('number').innerHTML = numberValue;
    }
</script>

【讨论】：