如何更新/刷新javascript变量数据只是在一个按钮点击，而不刷新网页

Question

我有一个名为roles.js的javascript文件，其中包含我将不断添加或删除名称的用户角色。我有一个javascript主文件，我调用这些变量。

我将角色变量移动到一个新文件的原因是，如果我要在主js文件中这样做，我可以更容易地添加或删除名称，而不会扰乱其余的代码。

这些是角色变量:

//role
let hostRole = [
"john" // these are the user names
]
let adminRole = [
"sarah",
"amy"
]
let modRole = [
"megan"
]

所以每次我在role.js文件中添加或删除用户名时，我都需要刷新我的网站以使其生效。

是否有可能有一个按钮在我的HTML页面刷新上述javascript文件/变量?这样我就不用一直刷新网页了

如果有人能告诉我实现这一点的代码，我将不胜感激。提前非常感谢!

Answer 1

这个问题有答案，不是作为一个洞，而是作为一个部分。如果我正确理解你的问题，你需要创建2个函数。一个用于向目标数组中添加人员，一个用于从目标数组中删除人员。这些函数应该包括事件侦听器和特定的数组方法。我已经创建了这些函数，我希望我正确理解了你的问题。

要添加的函数:

const addOnClick =(person, array)=>{
const addBtn = document.getElementById("add-btn-id");
addBtn.addEventListener("click", function(){
arr.push(person);
});

};

你需要创建一个带有"add-btn-id"id

删除:

const removeOnClick =(person,arr)=>{
const removeBtn = document.getElementById("remove-btn-id")
removeBtn.addEventListener("Click",function(){
const i = arr.indexOf(person);
if(i> -1) arr.splice(i,1);
});
};