如何修复我用javascript制作的滑块

我是Javascript的绝对初学者，但我对C#了如指掌。 所以我被我写的代码卡住了，看起来很好，我甚至不知道从哪里开始

var correntItem=blattlenum1；
函数动画（bottleNum）{
if（correntItem！=battlenum）
{
document.getElementById（bottleNum）.className=“动画中”；
document.getElementById（correnItem）.classname=“animation\u out”；
correntItem=瓶数；
}
}

a{
文字装饰：无；
}
#瓶装水1{
最大宽度：10%；
转换：translateX（-150px）
}
#瓶数m2{
最大宽度：10%；
转换：translateX（-150px）
}
{
动画填充模式：正向；
动画名称：滑入；
动画持续时间：1s；
}.动画输出{
动画填充模式：正向；
动画名称：滑出；
动画持续时间：1s；
}
@关键帧滑出{
0%{变换：translateX（600px）比例（1）}
100%{变换：translateX（1350px）标度（1）}
}
@关键帧滑入{
0%{transform:translateX（-150px）比例（1）}
100%{变换：translateX（600px）比例（1）}
}

---

问题出在javascript中

var correntItem='battlenum1'；
函数动画（e）{
var-battlenum=e.id；
if（correntItem！==battlenum）{
var-battlenumelement=document.getElementById（battlenum）；
blockNumelement.style.display='block'；
battleNumelement.className='animation_in'；
var currentItemElement=document.getElementById（correntItem）；
currentItemElement.style.display='none'；
currentItemElement.classname=“动画输出”；
correntItem=瓶数；
}
}

a{
文字装饰：无；
}
#瓶装水1{
最大宽度：10%；
转换：translateX（-150px）
}
#瓶数m2{
最大宽度：10%；
转换：translateX（-150px）
}
{
动画填充模式：正向；
动画名称：滑入；
动画持续时间：1s；
}
.动画输出{
动画填充模式：正向；
动画名称：滑出；
动画持续时间：1s；
}
@关键帧滑出{
0%{变换：translateX（600px）比例（1）}
100%{变换：translateX（1350px）标度（1）}
}
@关键帧滑入{
0%{transform:translateX（-150px）比例（1）}
100%{变换：translateX（600px）比例（1）}
}

尝试将id作为字符串传递

onclick=“animation（'battlenum1'）”

动画可以工作（谢谢），但动画效果不好，实际上是一样的：

correntItem='battlenum1'。我认为您需要更好地理解变量名和字符串文字之间的区别。动画仍然不起作用：（但我将从一开始就学习这一点。）