如何使用click eventListener函数更改函数内的全局变量?

Question

我尝试使用4个不同的按钮改变passLength的变量。这将影响函数的字符串结果的长度。我注意到的问题是，当我按下"24"时，按钮，然后使用控制台日志(现在已注释掉)运行main函数，passLength仍然作为默认值16记录日志。我相信这是因为它在开始时是全局声明的，而我对按钮单击的更改并没有发生，因为它们是在函数中局部发生的。因为当我在buttonclick函数中控制日志时，它总是输出我需要的值。
所以我的问题是:我如何改变这个全局passLength变量与按钮点击?

let passLength = 16; //Default lngth of password. This will be changable later on
document.getElementById('btn8').addEventListener('click', function(){
let passLength = 8;
console.log(passLength)
return passLength;
});
document.getElementById('btn16').addEventListener('click', function(){
let passLength = 16;
console.log(passLength)
return passLength;
});
document.getElementById('btn20').addEventListener('click', function(){
let passLength = 20;
console.log(passLength)
return passLength;
});
document.getElementById('btn24').addEventListener('click', function(){
let passLength = 24;
console.log(passLength)
return passLength;
});

randomString(passLength)
function randomString(passLength){
//console.log(passLength)
var randomPassword = '';
var characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+?!$/><)(%&*'
for(var i, i = 0; i < passLength; i++){
randomPassword += characters.charAt(Math.floor(Math.random() * characters.length))
};
console.log(randomPassword)
return randomPassword;
};
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('string').textContent = randomString(passLength);
});

HTML:

<div id="contentWrapper">
<div class="row">
<h2>Generate a Secure Password</h2>
</div>
<div class="row">
<div id="stringContainer">
<p id="string">Click the button to start!</p> <!--password inside-->
</div>
</div>
<div class="btnRow">
<div id="generateButton">
<button id="btn">Generate</button>
</div>
</div>
<div class="row">
<!--empty row-->
</div>
<div class="h3Row">
<h3>Select Number of Characters:</h3>
</div>
<div class="selectingRow">
<div class="selectorBtn">
<button id="btn8" class="slctBtn">8</button>
</div>
<div class="selectorBtn">
<button id="btn16" class="slctBtn">16</button>
</div>
<div class="selectorBtn">
<button id="btn20" class="slctBtn">20</button>
</div>
<div class="selectorBtn">
<button id="btn24" class="slctBtn">24</button>
</div>
</div>
</div>

CSS

html, body {
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#contentWrapper {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
background-color: rgb(177, 192, 177);
}
h2 {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
.row {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
width: 100%;
min-height: 50px;
}
.btnRow {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 35px;
}
.h3Row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-height: 25px;
}
.selectingRow {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 25px;
}
.slctBtn {
min-height: 20px;
min-width: 20px;
border-radius: 4px;
border: none;
color: rgb(0, 0, 0);
background-color: rgb(255, 168, 168);
transition: all 0.07s linear;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
}
.slctBtn:hover { /*give this an animation later, maybe a little shake*/
background-color: rgb(201, 99, 99);
}
.slctBtn:active { /*give this an animation too*/
background-color: rgb(201, 99, 99);
border: 2px solid black;
}
#generateButton {
display: flex;
justify-content: center;
align-items: center;
}
#btn {
min-height: 50px;
min-width: 110px;
border-radius: 4px;
border: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: large;
background-color: rgb(255, 168, 168);
transition: all 0.07s linear;
}
#btn:hover { /*give this an animation later, maybe a little shake*/
background-color: rgb(201, 99, 99);
}
#btn:active { /*give this an animation too*/
background-color: rgb(201, 99, 99);
border: 2px solid black;
}
#stringContainer { /*Box*/
width: 300px;
height: 50px;
background-color: #636161;
color: #fff;
border-radius: 5px;
border: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#string {
display: flex;
letter-spacing: 2.1px;
}

Answer 1

您在每个创建新变量的事件处理程序中重新声明passLength与let(块范围)，而不是影响全局变量。删除每个回调中所有的let声明，以影响一个全局。

let passLength = 16; //Default lngth of password. This will be changable later on
document.getElementById('btn8').addEventListener('click', function(){
passLength = 8;
console.log(passLength)
return passLength;
});
document.getElementById('btn16').addEventListener('click', function(){
passLength = 16;
console.log(passLength)
return passLength;
});
document.getElementById('btn20').addEventListener('click', function(){
passLength = 20;
console.log(passLength)
return passLength;
});
document.getElementById('btn24').addEventListener('click', function(){
passLength = 24;
console.log(passLength)
return passLength;
});

randomString(passLength)
function randomString(passLength){
//console.log(passLength)
var randomPassword = '';
var characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+?!$/><)(%&*'
for(var i, i = 0; i < passLength; i++){
randomPassword += characters.charAt(Math.floor(Math.random() * characters.length))
};
console.log(randomPassword)
return randomPassword;
};
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('string').textContent = randomString(passLength);
});

html, body {
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#contentWrapper {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
background-color: rgb(177, 192, 177);
}
h2 {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
.row {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
width: 100%;
min-height: 50px;
}
.btnRow {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 35px;
}
.h3Row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-height: 25px;
}
.selectingRow {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 25px;
}
.slctBtn {
min-height: 20px;
min-width: 20px;
border-radius: 4px;
border: none;
color: rgb(0, 0, 0);
background-color: rgb(255, 168, 168);
transition: all 0.07s linear;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
}
.slctBtn:hover { /*give this an animation later, maybe a little shake*/
background-color: rgb(201, 99, 99);
}
.slctBtn:active { /*give this an animation too*/
background-color: rgb(201, 99, 99);
border: 2px solid black;
}
#generateButton {
display: flex;
justify-content: center;
align-items: center;
}
#btn {
min-height: 50px;
min-width: 110px;
border-radius: 4px;
border: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: large;
background-color: rgb(255, 168, 168);
transition: all 0.07s linear;
}
#btn:hover { /*give this an animation later, maybe a little shake*/
background-color: rgb(201, 99, 99);
}
#btn:active { /*give this an animation too*/
background-color: rgb(201, 99, 99);
border: 2px solid black;
}
#stringContainer { /*Box*/
width: 300px;
height: 50px;
background-color: #636161;
color: #fff;
border-radius: 5px;
border: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#string {
display: flex;
letter-spacing: 2.1px;
}

<div id="contentWrapper">
<div class="row">
<h2>Generate a Secure Password</h2>
</div>
<div class="row">
<div id="stringContainer">
<p id="string">Click the button to start!</p> <!--password inside-->
</div>
</div>
<div class="btnRow">
<div id="generateButton">
<button id="btn">Generate</button>
</div>
</div>
<div class="row">
<!--empty row-->
</div>
<div class="h3Row">
<h3>Select Number of Characters:</h3>
</div>
<div class="selectingRow">
<div class="selectorBtn">
<button id="btn8" class="slctBtn">8</button>
</div>
<div class="selectorBtn">
<button id="btn16" class="slctBtn">16</button>
</div>
<div class="selectorBtn">
<button id="btn20" class="slctBtn">20</button>
</div>
<div class="selectorBtn">
<button id="btn24" class="slctBtn">24</button>
</div>
</div>
</div>