How to change a global variable within a function using click eventListener function?-CodePudding

I try to change the variable of passLength using 4 different buttons. This will affect the length of the string result of the function. The problem I'm noticing is that when I press for example the "24" button, then run the main function with the (now commented out) console log, passLength still logs as the default of 16. I believe this is because it was declared globally at the beginning, and my changes on button click are not taking place since they are happening locally within functions. Because when I console log within the buttonclick functions, it always puts out the value I need.
So my question is: How do I change this global passLength variable with button clicks?

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;
}

CodePudding user response：

You are re-declaring passLength with let (block scope) within each event handler which creates new variables, rather than affecting the global one. Remove all the let declarations in each callback to affect the one Global.

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>