如何使用按钮使数字上升一个 (Javascript)

Question

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

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

Answer 2

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

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

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

如何使用按钮使数字上升一个 (Javascript)

How to make a number go up one with a button (Javascript)

html

javascript

css

numbers

var

代码