Javascript 有没有办法回收JS变量？

我正在尝试创建一个简单的bib克隆。这意味着我将有20多个框，所有这些框都需要作者姓名。所以我把作者的名字分成了变量lname和fname。我的get.element.by.id将只包含与初始函数相同的变量，加上或减去不同的变量

例如，在JS中，我有一个变量lname。lname被绑定到第一个盒子上。如果我尝试对第二个框“重用”lname，它会给出第一个框的结果。我可以为我创建的每个框编写一个函数，但似乎应该有一种方法“重用”另一个函数中的变量。有吗

功能bib（）{
var lname=document.getElementById（“lname”）.value；
var fname=document.getElementById（“fname”）.value；
var title=document.getElementById（“title”）.value；
var city=document.getElementById（“城市”）.value；
var corp=document.getElementById（“corp”）值；
var pub=document.getElementById（“pub”）.value；
document.getElementById（“cite1”）.innerHTML=lname+，“+fname+”+title+”+city+“+corp+”+pub+”；
document.getElementById（“cite2”）.innerHTML=lname+，“+fname+”和“+lname2+”，“+fname2+”+标题+”+“+city+”+corp+“+pub+”；
}

.grid{
显示：网格；
柔性包装：包装；
网格：500px/自动；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：左对齐；
填充：10px 10px 10px 10px；
字体大小：16px；
}
/*.浮动{
浮动：左；
}*/
.产出{
高度：150像素；
宽度：255px；
柔性包装：包装；
单词包装：打断单词；
}
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
.电网{
宽度：100%；
}
}

MLA采购
印刷采购
在适当的框中输入打印源的信息，单击“生成”，复制到剪贴板

并粘贴到您的工作框中

Bib一本书或一篇文章-
单一作者












产生

引用

复制到剪贴板
Bib一本书或一篇文章-
单一作者
















产生

引用

复制到剪贴板
Bib一本书或一篇文章-
单一作者












产生

引用

复制到剪贴板
Bib一本书或一篇文章-
单一作者












生成
引用

复制到剪贴板

由于无法重用ID，我建议为输入提供一个类。然后你的BIB函数，传递

这个

，并参考父元素以获得子输入

功能围嘴（el）{
var\u parent=el.parentNode.parentNode；
var lname=_parent.querySelector（“.lname”）.value；
var fname=_parent.querySelector（“.fname”）.value；
var title=_parent.querySelector（“.title”）.value；
var city=_parent.querySelector（“.city”）.value；
var corp=_父查询选择器（“.comp”）.值；
var pub=_parent.querySelector（“.pub”）.value；
_parent.querySelector（“.cite”）.innerHTML=lname+”，“+fname+”+title+”+city+“+corp+”+pub+”；
}

.grid{
显示：网格；
柔性包装：包装；
网格：500px/自动；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：左对齐；
填充：10px 10px 10px 10px；
字体大小：16px；
}
/*.浮动{
浮动：左；
}*/
.产出{
高度：150像素；
宽度：255px；
柔性包装：包装；
单词包装：打断单词；
}
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
.电网{
宽度：100%；
}
}

MLA采购
印刷采购
在适当的框中输入打印源的信息，单击“生成”，复制到剪贴板

并粘贴到您的工作框中

Bib一本书或一篇文章-
单一作者












产生

引用

复制到剪贴板

每个页面中“id”属性的值必须是唯一的。您不能重复使用“id”值。这是否回答了您的问题？此外，听起来很迂腐，但HTML元素id与JS变量完全不同。完全没有关系。此外，您应该将每组

输入

字段包装在父容器中，这样您就不需要任何

id

s了。ID使自己易于使用脆弱的代码，而这些代码并不像您看到的那样可伸缩。除了

id

，还有很多其他的字段引用方法。我可能缺少一些基础知识，我还在学习/应用。如果使用容器，是否会使用具有不同容器名称的get.element.by.class？然后连接容器名称？