CODEWITHSUNDEEP
javascripthtmlcssnumbersvar
chesmond
chesmond

Reputation: 27

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

I am super confused about javascript and how I make this number go up, if you could tell me how it would be great. (I am a bit new to javascript so sorry if this makes no sense and let me know in the comments if I should provide more but that code down there is the entire thing)

Code

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

Upvotes: 0

Views: 1619

Answers (3)

Real Quick
Real Quick

Reputation: 2810

This should be what you're looking for:

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

Upvotes: 1

Ahmad Raza
Ahmad Raza

Reputation: 11

This is Your Neat Code you neet to increment that number as I do let me know if you need any other help

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

Upvotes: 1

rommyarb
rommyarb

Reputation: 479

You can do something like this:

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>

Upvotes: 3

Related Questions