使用单击事件更改全局变量
[英]change global variable with click event
问题描述
我正在尝试使用点击事件更改全局变量，但我被卡住了。 我已经按照下面编写代码的方式进行了尝试，并且在控制台中得到了正确的结果，但它在全局范围内不起作用。 我还能怎么做？
const levels = { easy: 5, medium: 3, hard: 2 } let currentLevel = levels.hard document.querySelector('#easyBtn').addEventListener('click', function () { currentLevel = levels.easy console.log (currentLevel) }) <button id="easyBtn" type="button">Easy</button>
完整代码：
window.addEventListener('load', init); // Globals const levels = { easy: 5, medium: 3, hard: 2 } let currentLevel = levels.hard document.querySelector('#easyBtn').addEventListener('click', function () { currentLevel = levels.easy console.log (currentLevel) }) document.querySelector('#mediumBtn').addEventListener('click', function() { currentLevel = levels.medium console.log (currentLevel) }) document.querySelector('#hardBtn').addEventListener('click', function() { currentLevel = levels.hard console.log (currentLevel) }) let time = currentLevel; let score = 0; let isPlaying; // DOM Elemennts const wordInput = document.querySelector('#word-input'); const currentWord = document.querySelector('#current-word'); const scoreDisplay = document.querySelector('#score'); const timeDisplay = document.querySelector('#time'); const message = document.querySelector('#message'); const seconds = document.querySelector('#seconds'); const words = [ 'hat', 'river', 'fun', 'billion', 'park', 'superman', 'quacky', 'juggler', 'word', 'race', 'bullet', 'computer', 'Anne', 'Jacob', 'Drew', 'garden', 'bike', 'waffle', 'hero', 'statue', 'loom', 'backpack', 'picture', 'stand', 'window', 'marker', 'bank', 'chord', 'lettuce', 'color' ]; //Initialize game function init() { seconds.innerHTML = currentLevel; //load word from array showWord(words); //start matching on word input wordInput.addEventListener('input', startMatch) //call countdown every second setInterval(countdown, 1000); //check game status setInterval(checStatus, 50); } //start match function startMatch() { if(matchWords()) { isPlaying = true; time = currentLevel + 1; showWord(words); wordInput.value = ''; score++; } //score is -1 display 0 if(score === -1) { scoreDisplay.innerHTML = 0; } else { scoreDisplay.innerHTML = score; } } //match current word to wordInput function matchWords() { if(wordInput.value === currentWord.innerHTML) { message.innerHTML = 'Correct!!!' return true; } else { message.innerHTML = ''; return false; } } function showWord(words) { // Generate random array index const randIndex = Math.floor(Math.random() * words.length); // Output random word currentWord.innerHTML = words[randIndex]; } function countdown() { //make sure time is not run out if(time > 0) { time--; }else if(time === 0) { isPaying = false; } timeDisplay.innerHTML = time; } function checStatus() { if (!isPlaying === false && time === 0) { message.innerHTML = 'Game Over!!!'; score = -1; } }
* { margin: 0; padding: 0; box-sizing: border-box; } .body { background-color: #a8a8a8; } .header { background-color: #4646c7; display: flex; justify-content: center; height: 70px; align-items: center; } .btnSpacing { display: flex; justify-content: space-around; align-content: center; width: 100; } #easyBtn { display: flex; justify-content: center; } #mediumBtn { display: flex; justify-content: center; } #hardBtn { display: flex; justify-content: center; } #seconds { color: rgba(248, 2, 2, 0.753); font-weight: bold }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <title>Word Race</title> </head> <!DOCTYPE html> <html lang="en"> <body class="body"> <header class="header"> <h1>Word Race</h1> </header> <br> <div class="container text-center col-md-6 mx-auto "> <!-- Buttons --> <div class="btnSpacing"> <div> <button id="easyBtn" type="button" class="btn btn-success">Easy</button> </div> <div> <button id="mediumBtn" type="button" class="btn btn-warning">Medium</button> </div> <div> <button id="hardBtn" type="button" class="btn btn-danger">Hard</button> </div> </div> <br> <br> <!-- Word & Input --> <div class="row"> <div class="col-md-6 mx-auto"> <p class="lead">Type The Given Word Within <span id="seconds">5</span> Seconds:</p> <h2 class="display-2 mb-5" id="current-word">hello</h2> <input type="text" class="form-control form-control-lg" placeholder="Start typing..." id="word-input" autofocus> <h4 class="mt-3" id="message"></h4> <!-- Time & Score Columns --> <div class="row mt-5"> <div class="col-md-6"> <h3>Time Left: <span id="time">0</span> </h3> </div> <div class="col-md-6"> <h3>Score: <span id="score">0</span> </h3> </div> </div> <!-- Instructions --> <div class="row mt-5"> <div class="col-md-12"> <div class="card card-body bg-secondary text-white"> <h5>Instructions</h5> <p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score will reset.</p> </div> </div> </div> </div> </div> </div> <script src="js/main.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
1 个解决方案
解决方案1
0 2018-08-19 03:03:40
我认为您要问的是“为什么我更新变量时没有更新时间之类的东西？”
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); // Globals const levels = { easy: 5, medium: 3, hard: 2 } let 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) }) let time = currentLevel; let score = 0; let isPlaying; // DOM Elemennts const wordInput = document.querySelector('#word-input'); const currentWord = document.querySelector('#current-word'); const scoreDisplay = document.querySelector('#score'); const timeDisplay = document.querySelector('#time'); const message = document.querySelector('#message'); const seconds = document.querySelector('#seconds'); const words = [ 'hat', 'river', 'fun', 'billion', 'park', 'superman', 'quacky', 'juggler', 'word', 'race', 'bullet', 'computer', 'Anne', 'Jacob', 'Drew', 'garden', 'bike', 'waffle', 'hero', 'statue', 'loom', 'backpack', 'picture', 'stand', 'window', 'marker', 'bank', 'chord', 'lettuce', 'color' ]; //Initialize game function init() { seconds.innerHTML = currentLevel; //load word from array showWord(words); //start matching on word input wordInput.addEventListener('input', startMatch) //call countdown every second setInterval(countdown, 1000); //check game status setInterval(checStatus, 50); } //start match function startMatch() { if(matchWords()) { isPlaying = true; time = currentLevel + 1; showWord(words); wordInput.value = ''; score++; } //score is -1 display 0 if(score === -1) { scoreDisplay.innerHTML = 0; } else { scoreDisplay.innerHTML = score; } } //match current word to wordInput function matchWords() { if(wordInput.value === currentWord.innerHTML) { message.innerHTML = 'Correct!!!' return true; } else { message.innerHTML = ''; return false; } } function showWord(words) { // Generate random array index const randIndex = Math.floor(Math.random() * words.length); // Output random word currentWord.innerHTML = words[randIndex]; } function countdown() { //make sure time is not run out if(time > 0) { time--; }else if(time === 0) { isPaying = false; } timeDisplay.innerHTML = time; } function checStatus() { if (!isPlaying === false && time === 0) { message.innerHTML = 'Game Over!!!'; score = -1; } } function setCurrentLevel(level) { currentLevel = level; init(); }
* { margin: 0; padding: 0; box-sizing: border-box; } .body { background-color: #a8a8a8; } .header { background-color: #4646c7; display: flex; justify-content: center; height: 70px; align-items: center; } .btnSpacing { display: flex; justify-content: space-around; align-content: center; width: 100; } #easyBtn { display: flex; justify-content: center; } #mediumBtn { display: flex; justify-content: center; } #hardBtn { display: flex; justify-content: center; } #seconds { color: rgba(248, 2, 2, 0.753); font-weight: bold }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <title>Word Race</title> </head> <!DOCTYPE html> <html lang="en"> <body class="body"> <header class="header"> <h1>Word Race</h1> </header> <br> <div class="container text-center col-md-6 mx-auto "> <!-- Buttons --> <div class="btnSpacing"> <div> <button id="easyBtn" type="button" class="btn btn-success">Easy</button> </div> <div> <button id="mediumBtn" type="button" class="btn btn-warning">Medium</button> </div> <div> <button id="hardBtn" type="button" class="btn btn-danger">Hard</button> </div> </div> <br> <br> <!-- Word & Input --> <div class="row"> <div class="col-md-6 mx-auto"> <p class="lead">Type The Given Word Within <span id="seconds">5</span> Seconds:</p> <h2 class="display-2 mb-5" id="current-word">hello</h2> <input type="text" class="form-control form-control-lg" placeholder="Start typing..." id="word-input" autofocus> <h4 class="mt-3" id="message"></h4> <!-- Time & Score Columns --> <div class="row mt-5"> <div class="col-md-6"> <h3>Time Left: <span id="time">0</span> </h3> </div> <div class="col-md-6"> <h3>Score: <span id="score">0</span> </h3> </div> </div> <!-- Instructions --> <div class="row mt-5"> <div class="col-md-12"> <div class="card card-body bg-secondary text-white"> <h5>Instructions</h5> <p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score will reset.</p> </div> </div> </div> </div> </div> </div> <script src="js/main.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
编辑：看起来可能还有一些其他函数也可能需要重写，例如何时/如何设置实际倒计时（或一些一般重构，以便在 init 中调用它们，因为全局变量较少）但这是粗略的回答。 您需要明确告诉游戏何时更新了设置以及何时重新运行。
jQuery 更改事件中无法访问全局 JavaScript 变量
[英]Global JavaScript variable not accessible in jQuery change event
无法使用 Javascript 将全局变量分配给下拉更改事件
[英]Unable to assign a global variable to a drop down change event using Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.