添加一个计数器

静态页面中只是做了一个静态的前台显示,代码是

 <a href="javascript:;"></a><input type="text" class="fl inp-t" value="1"/><a href="javascript:;"></a>

想要把它变为按下左边可以增加,右边减少加一个script 和在原有代码上进行一些小修改

<a href="javascript:;" onclick="subNum();"></a>

<input type="text" class="fl inp-t" name="count" id="count" value="1"/>

<a href="javascript:;"  onclick="addNum();"></a>

onclick 主要调用的script 中的点击事件的方法

<script type="text/javascript">

function addNum() {

document.getElementById("count").value = parseInt(document.getElementById("count").value) + 1;

}

function subNum() {

             if (document.getElementById("count").value == "1") {

return;}

document.getElementById("count").value = parseInt(document.getElementById("count").value) - 1;}

</script>

当使用完此段代码之后会发现,每个商品的计数器都是不独立的,我们需要进行修改

要给他指定 固定的id 

	function addNum(inputId) {
		document.getElementById(inputId).value = parseInt(document
				.getElementById(inputId).value) + 1;
	}
	function subNum(inputId) {

		if (document.getElementById(inputId).value == "1") {
			return;
		}

		document.getElementById(inputId).value = parseInt(document
				.getElementById(inputId).value) - 1;
	}
<div class="chooseAmount">
     <a href="javascript:void(0);" 
        th:onclick="${#strings.concat('subNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
     <input th:id="${cartsInfo.commodityId}" type="text" class="fl inp-t" value="1" />
<a href="javascript:void(0);" 
    th:onclick="${#strings.concat('addNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
						</div>







你可能感兴趣的:(添加一个计数器)