点击按钮实现加减操作

小小红色无花果

已于 2022-10-26 00:22:19 修改

阅读量737

点赞数

文章标签： servlet 前端 html

于 2022-09-03 16:27:55 首次发布

本文链接：https://blog.csdn.net/weixin_45096939/article/details/126679151

版权

原生写法为：

<!DOCTYPE html>
<!-- <script src="./kindTrend.js"></script> -->
<html>
	<head>
		<meta charset="utf-8">
		<title>原生实现点击加减</title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="dv">0</div>
		<button class="addition" type="button">+1</button>
		<button class="subtraction" type="button">-1</button>
	</body>
	<script type="text/javascript">
		const dvE = document.querySelector("#dv");
		const additionE = document.querySelector(".addition");
		const subtractionE = document.querySelector(".subtraction");

		let count = 30;
		dvE.innerHTML = count;
		additionE.addEventListener("click", ()=>{
			count += 1;
			dvE.innerHTML = count;
		});
		subtractionE.addEventListener("click",()=>{
			count -= 1;
			dvE.innerHTML = count;
		});
	</script>
</html>

效果图如下：