Javascript 使用click事件更改全局变量

Javascript 使用click事件更改全局变量,javascript,global-variables,addeventlistener,mouseclick-event,Javascript,Global Variables,Addeventlistener,Mouseclick Event,我试图通过单击事件更改全局变量,但我被卡住了。我已经用下面编写代码的方式尝试过了,我在控制台中得到了正确的结果,但它不能在全局范围内工作。我还能怎么做呢 const levels={ 简单:5, 中位数:3, 硬:2 } 让currentLevel=levels.hard document.querySelector(“#easyBtn”).addEventListener('click',function(){ currentLevel=levels.easy console.log(当前级

我试图通过单击事件更改全局变量,但我被卡住了。我已经用下面编写代码的方式尝试过了,我在控制台中得到了正确的结果,但它不能在全局范围内工作。我还能怎么做呢

const levels={
简单:5,
中位数:3,
硬:2
}
让currentLevel=levels.hard
document.querySelector(“#easyBtn”).addEventListener('click',function(){
currentLevel=levels.easy
console.log(当前级别)
})

Easy
我认为您要问的是“为什么在我更新变量时没有给定的更新时间?”

Javascript本身不会“监听”更改。在更新变量之后,您需要告诉依赖它的所有东西也要更新

有一百万种不同的方法可以做到这一点(还有一百万个库试图让JavaScript实质上监听更改)。在最简单的级别上:您可以尝试将currentLevel设置切换为函数,并使其重新初始化游戏

setCurrentLevel(level) {
    currentLevel = levels.easy
    init()
    // any other stuff that needs to be updated/reset
}
// ...
document.querySelector('#easyBtn').addEventListener('click', function () {
  setCurrentLevel(levels.easy)
})
window.addEventListener('load',init);
//全球的
常量级别={
简单:5,
中位数:3,
硬:2
}
让currentLevel=levels.hard
document.querySelector(“#easyBtn”).addEventListener('click',function(){
setCurrentLevel(levels.easy)
})
document.querySelector(“#mediumBtn”).addEventListener('click',function(){
setCurrentLevel(levels.medium)
})
document.querySelector(“#hardBtn”).addEventListener('click',function(){
setCurrentLevel(levels.hard)
})
让时间=电流水平;
分数=0;
让我来播放;
//DOM元素
const wordInput=document.querySelector(“#word input”);
const currentWord=document.querySelector(“#当前单词”);
const scoresplay=document.querySelector(“#score”);
const timeDisplay=document.querySelector(“#time”);
const message=document.querySelector(“#message”);
const seconds=document.querySelector('#seconds');
常量字=[
“帽子”,
“河流”,
“有趣”,
"亿",,
“公园”,
“超人”,
“江湖医生”,
“魔术师”,
"字",,
"种族",,
“子弹”,
"电脑",,
“安妮”,
“雅各布”,
“德鲁”,
“花园”,
“自行车”,
“华夫饼”,
“英雄”,
“雕像”,
“织布机”,
“背包”,
“图片”,
"站",,
“窗口”,
“标记”,
“银行”,
“和弦”,
“生菜”,
“颜色”
];
//初始化游戏
函数init(){
seconds.innerHTML=当前级别;
//从数组加载字
showWord(单词);
//开始匹配单词输入
addEventListener('input',startMatch)
//每秒钟打一次倒计时
设置间隔(倒计时,1000);
//检查游戏状态
设置间隔(checStatus,50);
}
//开始比赛
函数startMatch(){
if(匹配词()){
isplay=true;
时间=电流电平+1;
showWord(单词);
wordInput.value='';
分数++;
}
//分数为-1显示0
如果(分数==-1){
scoreDisplay.innerHTML=0;
}否则{
scoreDisplay.innerHTML=分数;
}
}
//将当前单词与wordInput匹配
函数匹配词(){
if(wordInput.value==currentWord.innerHTML){
message.innerHTML='正确!!!'
返回true;
}否则{
message.innerHTML='';
返回false;
}
}
函数showWord(words){
//生成随机数组索引
const randIndex=Math.floor(Math.random()*words.length);
//输出随机字
currentWord.innerHTML=单词[randIndex];
}
函数倒计时(){
//确保时间没有用完
如果(时间>0){
时间--;
}否则如果(时间===0){
i支付=假;
}
timeDisplay.innerHTML=时间;
}
函数checStatus(){
如果(!isplay==false&&time==0){
message.innerHTML='游戏结束!!!';
得分=-1;
}
}
函数setCurrentLevel(级别){
currentLevel=电平;
init();
}
*{
保证金:0;
填充:0;
框大小:边框框;
}
.身体{
背景色:#a8a8a8;
}
.标题{
背景色:#4646c7;
显示器:flex;
证明内容:中心;
高度:70像素;
对齐项目:居中;
}
B.检查{
显示器:flex;
证明内容:周围的空间;
对齐内容:居中对齐;
宽度:100;
}
#容易的{
显示器:flex;
证明内容:中心;
}
#地中海{
显示器:flex;
证明内容:中心;
}
#硬的{
显示器:flex;
证明内容:中心;
}
#秒{
颜色:rgba(248,2,2,0.753);
字体大小:粗体
}

文字竞赛
文字竞赛

容易的 中等 硬的

在 5秒:

你好 剩余时间: 0 分数: 0 说明书 在给定的秒数内键入每个单词进行评分。要再次播放,只需键入当前单词。你的分数 将重置


您主要指出的代码不是试图更改变量,只是访问它。我如何更改它?
levels.easy=someNewValue
带有赋值,总是左边的东西被分配到右边的值。我想他是在问为什么网站上的其他东西在当前选定级别发生变化时不更新。如果你设置一个变量并使用它,然后更改变量的值,你必须再次查看该变量以获得最新的值。它不仅仅是自动更新用户界面。这对我来说是成功的。我感谢你的帮助。