Javascript 添加HTML文本框以修改JS数组项？需要研究的最佳实践和资源？欢迎提出任何建议

以下是我当前的应用程序：

鉴于以下数据，我在这里使用数组：

var mains = ["Chicken sammich", " Lasagna", " Plain Pizza", " Fried Beefcake", " Soylent Shake"];
var sides = ["Freedom fries", " Apple slices", " Tater tots", " Sad salad", " Hard-boiled egg"];
var desserts = ["Rice Pudding", " Gluten-free cookie", " Cheesecake Delux", " Sundae", " Graham Crackers"];

有没有一种简单的方法可以让用户从HTML中修改这些条目？或者我应该改为使用JS对象吗

基本上，代码是有效的，我想学习如何添加一些HTML表单和按钮来替换它们或添加/删除它们自己的表单和按钮。我知道这听起来需要做很多工作，所以我想在这里得到一些提示，因为我想学习

我想我可以创建一个按钮，它将.按下并.弹出数组元素。类似于

<form>
<input type="text" name="Add a Main"> <script> tbody.appendChild(tr);</script> 

---

请告知

您可以像这样使用框架。 或者，您也可以尝试使用vanila JS构建这个，正如您所描述的。看看我的非常丑陋但有效的例子

//您的数据
风险值数据=[“a”，“b”]；
//搜索dom元素
var root=document.getElementById（“列表编辑器”）；
var list=root.querySelector（'lo'）；
var input=root.querySelector（'input'）；
var btn=root.querySelector（'button'）；
var arr_preview=root.querySelector（'p'）；
//初始化
btn.addEventListener（'click'，新建项目，false）；
render_list（）；
函数新_项（）{
数据推送（输入值）；
render_list（）；
input.value=''；
}
函数render_list（）{
//删除列表
list.innerHTML=''；
//我知道For in不应该与数组一起使用
用于（数据中的var i）{
//创建列表项

var el=document.createElement（'li'）；
el.innerText=数据[i]；
//“创建”按钮以删除该项
var rem_el=document.createElement（“按钮”）；
rem_el.innerText='remove'；
rem_el.addEventListener（'click'，rem（i），false）；
附肢儿童（rem_el）；
//插入到DOM中
列表。附加子对象（el）；
}
arr_preview.innerText=JSON.stringify（数据）；
}
//fn工厂创建范围，可能不需要吗？
功能rem（j）{
返回函数（）{
数据拼接（j，1）；
render_list（）；
}
}

插入

以下是我为实现您的目标所做的努力。我使用jquery，因为您的代码中已经有了它。我使用一个循环来填充膳食列表，以避免在生成随机膳食时冻结UI。我希望代码足够清晰，您可以进一步开发它

const膳食计数=31；
变量循环；//超时循环
常量包装=$（“#膳食”）；
var mains=[“鸡肉三明治”、“千层面”、“普通比萨饼”、“炸牛排蛋糕”、“大豆奶昔”]；
var sides=[“自由薯条”、“苹果片”、“土豆片”、“悲伤沙拉”、“煮鸡蛋”]；
var甜点=[“米饭布丁”、“无麸质饼干”、“芝士蛋糕”、“圣代”、“格雷厄姆饼干”]；
var度量指示符=[]；
//在这里，我们将保存当前选定的菜肴
var currentMains=[]；
var currentSides=[]；
var currentDesserts=[]；
//此函数自动创建复选框
var复选框=函数（数组）{
变量框=[]；
for（数组的变量项）{
方框=$（''+项目+''）；
盒子。推（盒子）；
}
退货箱；
};
$（“#电源”）。附加（复选框（电源））；
$（'#sides'）。附加（复选框（sides））；
$（“#甜点”）。附加（复选框（甜点））；
//这是我们创建新菜单列表的地方
var newMenu=函数（）{
//首先让我们清空旧列表
wrapper.empty（）；
计量指示剂=[]；
//现在让我们保存当前选定的菜肴
电流电源=[]；
$（“#电源输入：选中”）。每个（功能（i，项）{
currentMains.push（项目名称）；
});
currentSides=[]；
$（“#边输入：选中”）。每个（函数（i，项）{
currentSides.push（项目名称）；
});
当前甜点=[]；
$（“#甜点输入：选中”）。每个（功能（i，项）{
currentdesperts.push（项目名称）；
});
//现在我们开始循环（只运行一次）
如果（！LOOP）LOOP=setInterval（addItem，10）；
};
//这将循环并添加新的膳食，就像在代码中一样
var addItem=函数（）{
if（测量指示剂长度<餐数）{
//在这里，我将其更改为使用当前项目
让mainId=Math.floor（Math.random（）*currentMains.length）；
设sideId=Math.floor（Math.random（）*currentSides.length）；
设dessertId=Math.floor（Math.random（）*currentDesserts.length）；
//我在整数之间添加了散列，以避免在较长的列表上出现错误的重复
//例：在11、2、3之前与1、12、3相同（1123==1123）
//我改成11#2#3！==1#12#3
设mealId=[mainId，sideId，dessertId].join（“#”）；
//如果已经没有这样的饭菜了
如果（！mealidentiers.includes（mealId））{
测量指示器。推（测量指示器）；
让容器=$（''）；
container.append（“”+（mealidentiers.length）+“”）；
//我为所有复选框都为空时添加了字符串
container.append（“”+（currentMains[mainId]| |“No main”）；
container.append（“”+（currentSides[sideId]| | No side'）；
容器。追加（“”+（当前甜点[甜点]| |无甜点”）；
附加（容器）；
}
}
};
//创建第一个菜单
新菜单（）；
//更改复选框时创建新菜单
$（'#customize'）。打开（'change'，'input'，newMenu）
.container{
边框底部：1px纯色灰色；
浮动：中心；
}
#米尔斯迪夫{
浮动：中心；
}
身体{
背景色：黑色；
颜色：白色；
}
梅因先生{
字体大小：16px；
字体大小：粗体；
颜色：#7C9BC8；
}
.这边{
字体大小：14px；
颜色：#B878C8；
}
.甜点{
颜色：#88C740；
字体大小：14px；
}
#干线{
颜色：#7C9BC8；
}
#侧面{
颜色：#B878C8；
}
#甜点{
颜色：#88C740；
}
标签{
显示：块；
}

这个方便的应用程序可以帮助你计划一顿完美的自助晚餐，而不会重复无聊的事情！
目前提供的主要菜肴：
目前提供的配菜：
目前提供的甜点：
工作出色，谢谢！我一点也不觉得难看，它很管用！只是需要一些爱。我可以问一下，您为什么建议Vue进行此类项目？Thanks@MattNewtonian，因为Vue（与其他框架相同）简化了
button1.addEventListener(onClick)(runFunctionToAppendItemToArray ?)