Low_Weaper,
так
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
</head>
<body>
<table>
<tr class="product">
<td>
<span id="down">-</span>
<input type="text" value="0" label="name" id="counter">
<span id="up">+</span>
</td>
</tr>
<div class="product">Продакт</div>
</table>
<script>
var down = document.getElementById('down');
var up= document.getElementById('up');
var counter= document.getElementById('counter');
var product = document.getElementsByClassName('product')[0];
down.addEventListener('click', function (event) {
counter.value = counter.value - 1 ;
if( counter.value == 0) product.style.color = 'black';
if( counter.value < 0) product.style.color = 'green';
if( counter.value > 0) product.style.color = 'red';
});
up.addEventListener('click', function (event) {
counter.value = +counter.value + 1 ;
if( counter.value == 0) product.style.color = 'black';
if( counter.value < 0) product.style.color = 'green';
if( counter.value > 0) product.style.color = 'red';
})
</script>
</body>
</html>