我如何做一个增长和收缩计数器在Jquery和HTML?

Question

我想试着让一个圆圈从20px增长到300px。它应该只是为了缩小尺寸而放大。有一个按钮意味着点击开始操作。每次单击该按钮时，它应该添加一个计数器，上面写着"增长和收缩计数器:">

$(document).ready(function() {
$("button").click(function() {
$("div").animate({
height: '300px',
width: '300px'
});
$("div").animate({
height: '20px',
width: '20px'
});
});
});
let counter = 0
document.querySelector("#counter").addEventListener('click', function() {
counter++
this.innerHTML = counter
})

html {
height: 100%;
}
#shrink {
height: 1px;
width: 1px;
border-radius: 50%;
background-color: lightgreen;
margin: 5px;
position: relative;
color: white;
}
#container1 {
display: flex;
align-items: center;
flex-direction: column;
}
#container2 {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 75%;
}
#grow {
margin: 5px;
border-radius: 10px;
}
#counter {
text: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
<button id="grow"><span style="font-size:20px">Grow</span> and <span style="font-size:8px">Shrink</span></button>
<p id="counter">Grow and Shrink Counter:</p>
</div>
<div id="container2">
<div id="shrink"></div>
</div>

Answer 1

我能马上发现的几个错误:

1. 在你的html中，ids
没有开、闭引号
2. counter变量声明两次。你可以将计数器按钮变量命名为counterButton
在代码片段中，包含jQuery库