如何使用clickeventListener函式在一個函式中改變一個全域變數？ -有解無憂

我嘗試用4個不同的按鈕來改變passLength這個變數。這將影響到函式的字串結果的長度。我注意到的問題是，當我按下例如 "24 "按鈕，然后用（現在被注釋掉的）控制臺日志運行主函式時，passLength仍然記錄為默認的16。我相信這是因為它在開始時是全域宣告的，而我在點擊按鈕時的改變并沒有發生，因為它們是在函式中區域發生的。因為當我在buttonclick函式中進行console log時，它總是顯示出我需要的值。
所以我的問題是：我怎樣才能讓我的程式在本地發生變化呢？所以我的問題是：我如何通過點擊按鈕來改變這個全域passLength變數？

let passLength = 16; /Default lngth of password。這在以后是可以改變的。

document.getElementById('btn8'/span>)。 addEventListener('click', function(>/span>) {
    let passLength = 8;
    console.log(passLength)
    returnpassLength。
});
document.getElementById('btn16'/span>)。 addEventListener('click', function(>/span>) {
    let passLength = 16;
    console.log(passLength)
    returnpassLength。
});
document.getElementById('btn20'/span>)。 addEventListener('click', function(>/span>) {
    let passLength = 20;
    console.log(passLength)
    returnpassLength。
});
document.getElementById('btn24'/span>)。 addEventListener('click', function(>/span>) {
    let passLength = 24;
    console.log(passLength)
    returnpassLength。
});


randomString(passLength)

function randomString（passLength）{
    //console.log(passLength)。
    var randomPassword = ''/span>;
    var characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-= ?!$/><)(%&*'/span>
    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'/span>)。 addEventListener('click', function(>/span>) {
    document.getElementById('string'/span>)。 textContent = randomString（passLength）。
});

HTML:

 <div id="contentWrapper"/span>>
        <div class="row"> 
          <h2>生成一個安全密碼</h2>/span>
        </div>/span>
        <div class="row"/span>>
            <div id="stringContainer">/span>
                <p id="string">點擊按鈕即可開始! </p> <！--密碼在內部->
            </div>/span>
        </div>/span>
        <div class="btnRow"/span>>
            <div id="generationButton">
                <button id="btn"/span>> 生成</button>。
            </div>/span>
        </div>/span>
        <div class="row"/span>>
            <!--empty row-->
        </div>/span>
        <div class="h3Row"/span>>
            <h3>選擇字符數：</h3> 
        </div>>
        <div class="selectionRow"> 
            <div class="selectorBtn"/span>>
                < button id="btn8"/span> class="slctBtn"/span>> 8</button>
            </div>
            <div class="selectorBtn"> 
                < button id="btn16"/span> class="slctBtn"/span>> 16</button>
            </div>
            <div class="selectorBtn"> 
                < button id="btn20"/span> class="slctBtn"/span>> 20</button>
            </div>
            <div class="selectorBtn"> 
                < button id="btn24"/span> class="slctBtn"/span>> 24</button>
            </div>
        </div>/span>
    </div>

CSS

html, body {
    font-family: sans-serif;
    高度。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: 所有0.07s線性。
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
}

.slctBtn:hover { /*稍后給它一個影片，也許會有一點搖晃*/。
    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: 大。
    background-color: rgb(255, 168, 168) 。
    transition: 所有0.07s線性。
}

#btn:hover { /*稍后給它一個影片，也許會有一點搖晃*/。
    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;
    高度: 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;
}

uj5u.com熱心網友回復：

你正在用let重新定義passLength（塊范圍），在每個事件處理程式中創建新的變數，而不是影響全域的變數。在每個回呼中洗掉所有的let宣告，以影響全域的變數。

。

let passLength = 16; /Default lngth of password. 這在以后是可以改變的。

document.getElementById('btn8'/span>)。 addEventListener('click', function(>/span>){
    passLength = 8;
    console.log（passLength）。
    returnpassLength。
});
document.getElementById('btn16'/span>)。 addEventListener('click', function(>/span>){
    passLength = 16;
    console.log(passLength)
    returnpassLength。
});
document.getElementById('btn20'/span>)。 addEventListener('click', function(>/span>){
    passLength = 20;
    console.log(passLength)
    returnpassLength。
});
document.getElementById('btn24'/span>)。 addEventListener('click', function(>/span>){
    passLength = 24;
    console.log(passLength)
    returnpassLength。
});


randomString(passLength)

function randomString（passLength）{
    //console.log(passLength)。
    var randomPassword = ''/span>;
    var characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-= ?!$/><)(%&*'/span>
    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'/span>)。 addEventListener('click', function(>/span>) {
    document.getElementById('string'/span>)。 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;
}

.selectionRow {
    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: 所有0.07s線性。
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
}

.slctBtn:hover { /*稍后給它一個影片，也許是一個小小的搖晃*/。
    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: 大。
    background-color: rgb(255, 168, 168) 。
    transition: 所有0.07s線性。
}

#btn:hover { /*稍后給它一個影片，也許是一個小搖晃*/。
    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>生成一個安全密碼</h2>/span>
        </div>/span>
        <div class="row"> 
            <div id="stringContainer">/span>
                <p id="string">點擊按鈕即可開始! </p> <！--密碼在內部->
            </div>/span>
        </div>/span>
        <div class="btnRow"> 
            <div id="generationButton">
                <button id="btn"/span>> 生成</button>。
            </div>/span>
        </div>/span>
        <div class="row"> 
            <!--empty row-->
        </div>
        <div class="h3Row">/span>
            <h3>選擇字符數：</h3> 
        </div>/span>
        <div class="selectionRow">/span>
            <div class="selectorBtn"/span>>
                < button id="btn8"/span> class="slctBtn"/span>> 8</button>
            </div>
            <div class="selectorBtn"> 
                < button id="btn16"/span> class="slctBtn"/span>> 16</button>
            </div>
            <div class="selectorBtn"> 
                < button id="btn20"/span> class="slctBtn"/span>> 20</button>
            </div>
            <div class="selectorBtn"> 
                < button id="btn24"/span> class="slctBtn"/span>> 24</button>
            </div>
        </div>/span>
    </div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/316184.html

標籤：

上一篇：如何在每次回應中比較變數的前值和新的變數值node.js

下一篇：將document.body.style.backgroundColor分配給一個變數