So im new to javascript and i got this code from the internet thats supposed to on the click of the arrows increase or decrease "magic points" by taking from or adding to the "points left: " but its not working. i keep getting the error: Uncaught ReferenceError: incAtt is not defined at HTMLButtonElement.onclick i know that decAtt function is not written yet but i cant seem to get the incAtt function to work, i tried document.getElementById("incAtt").addEventListener("click", function() then defining id="incAtt" but that didnt work either any ideas why its not working? its working perfectly on the website i copied this from.
</table>
<span onclick="incAtt('magic');" style="cursor: pointer;">▲</span>
<span onclick="decAtt('magic');" style="cursor: pointer;">▼</span>
<div id="magic" style="display:inline;">0</div>
</td>
</tr>
<tr>
<td style="text-align:right;">
Points left:
</td>
<td>
<div id="points" style="display:inline;">10</div>
</td>
<table>
<script function incAtt(att)> {
pts = parseInt($('#points').html());
flag = (pts > 0);
if (flag) {
n = parseInt($('#' + att).html());
$('#' + att).html(n + 1);
$('#points').html(pts - 1);
}
}
</script>