Change input value Number dynamically

Question

Good morning guys! I’m new at this, I want the value of my input to disappear or subtract with clicking on the buttons. But it’s not working... And when I make the change manually and click on any of the buttons, the value becomes the default which is 8.

function addAtribute(index) {
  if (document.getElementById(index).value < 20) {
    document.getElementById(index).value = Number(document.getElementById(index).value) + 1;
  }
}

function subAtribute(index) {
  if (document.getElementById(index).value > 9) {
    document.getElementById(index).value = Number(document.getElementById(index).value) - 1;
  }
}

<form>
  <table>
    <tr>
      <td>Status</td>
      <td>Valor</td>
    </tr>
    <tr>
      <td>exemplo</td>
      <td><button onclick="subAtribute('exemplo')" ;><img src="img/icons/menos.png"></button>
        <input type="number" name="Exemplo" id="exemplo" value="8" min="8" max="20">
        <button onclick="addAtribute('exemplo')" ;><img src="img/icons/mais.png"></button></td>
    </tr>
  </table>
</form>

Answer 1

I found the answer! Just include the button type in the button type="button" so that it does not re-load on the page.