Add + Subtract Buttons

showing difference between string and number

HTML

<form id="say-form" onsubmit="return false;" action="#">
    Product A: <input type="text" id="said" value="1" size="3" autocomplete="off" />
    <input type="button" id="add" value="Add" />
    <input type="button" id="subtract" value="Subtract" />
</form><br />
<br />
<div id="cart"></div>

JavaScript

// Declare VARIABLES and set them same time
var form     = document.getElementById( 'say-form' );
var add      = document.getElementById( 'add' );
var subtract = document.getElementById( 'subtract' );
var input    = document.getElementById( 'said' );
var cart     = document.getElementById( 'cart' );
var items    = 0;


add.onclick = function() {
    
  items = items + parseInt( input.value, 10 );
    
  // set the HTML inside "cart"
  cart.innerHTML = "You have " + items;
       
};

subtract.onclick = function() {
    
    items = items - parseInt( input.value, 10 );
    
    if ( items < 0 ) {
      items = 0 ;
    }
    
    cart.innerHTML = "You have " + items;
    
};