在javascript中动态更改height属性在单击2次后不起作用。我想在单击时连续切换多次

下面给出了显示我正在做什么的简单代码。我很困惑，它是否应该工作，但为什么它没有按预期工作

const caretEl=document.getElementById（“插入符号”）；
const wrapperEl=document.getElementById（“包装器”）；
caretEl.addEventListener（“单击”，函数（）{
caretEl.childNodes[0].classList.toggle（“fa插入符号向上”）；
如果（wrapperEl.style.height>=“20vh”）{
//wrapperEl.style.paddingBottom=“1vh”；
wrapperEl.style.height=“8vh”；
控制台日志（“gt 20vh”）；
//wrapperEl.style.overflow=“可见”；
//包装器。移除属性（“溢出”）；
}否则{
//wrapperEl.style.paddingBottom=“2vh”；
wrapperEl.style.height=“20vh”；
控制台日志（“lt 20vh”）；
//wrapperEl.style.overflow=“隐藏”；
}
返回wrapperEl.style.height；
})

.wrapper{
宽度：30vw；
高度：8vh；
溢出：隐藏；
垫底：1vh；
保证金：20vh自动；
边框：1px纯灰；
}
.包装头{
宽度：28vw；
保证金：0自动；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
插入符号{
显示：块；
宽度：10px；
高度：10px；
边框：2件纯黑；
}
.内容{
边缘顶端：19像素；
}

完成60%


一,
一,
一,
一,
一,
一,
一,

我认为错误在于比较。由于“20vh”和“8vh”是字符串，“8”按时间顺序排在“2”之后，因此任何以“8”开头的字符串都大于任何以“2”开头的字符串，即使其中一个仅为“8”，另一个为“200”

我认为将你的if声明改为：

if (parseInt(wrapperEl.style.height) >= 20)

应该解决这个问题

不过，我要指出，创建可扩展部分还有其他解决方案，即使仅使用CSS，也值得研究