javascript - 我必须在我的代码中添加什么以使我的按钮在每个矩形上返回不同的随机数?

所以我写了这段代码,当我按下按钮在矩形上生成 4 个随机数时我尝试(如果它可以生成 4 个带有最多 10 个字符的数字和字母的随机结果,那就太好了)。什么是正确的方法?我尝试了很多东西,现在我卡住了

谢谢你的时间

let passboxes = document.getElementsByClassName('grid-item')



function generatepass (){
    // let randomnumber = Math.floor(Math.random()*13 ) +1
    randomnumber = Math.floor(Math.random()*13 ) +1

    for (i=0 ; i<passboxes.length; i++) {
    
    passboxes[i].textContent +=  randomnumber 
    }
}
html , body {
    margin: 0;
    padding: 0;
    background-color: #1F2937;;
    color: #F9FAFB;
}
#bodydiv {
    margin-left: 62px;
}

#text1 {
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 200%;
    position: relative;
    margin-top: 64px;
    /* line-height: 10px; */
}

.tria {
    font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 300;
    font-size: 50%;
    line-height: 40px;

}

.duo{
    color: #F59E0B;
}
p{
    margin: 0;
}

#passbtn {
    padding: 10 15;
    color: #F9FAFB;
    margin-top: 30px;
    border: 0;
    background-color: #F59E0B;
    border-radius: 8px;
    font-size: 100%;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

.grid-container {
    display: inline-grid;
    grid-template-columns: auto auto;
    margin-top: 50px;
    column-gap: 30px;
    row-gap: 30px;
    
  }

.grid-item ,.grid-item2,.grid-item3,.grid-item4 {
    height: 20;
    background-color: #F59E0B;
    font-size: large;
    width: 200px;
    padding: 5 5;
    text-align: center;
    border-radius: 8px;
   
}
<html>
    <head>
        <link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="bodydiv">
    <div id="text1">
        <p class="ena">Generate a</p>
        <p class="duo">random password</p>
        <p class="tria">Never use an insecure password again.</p>
    </div>
    <div>
        <button id="passbtn" onclick="generatepass()" ><i class="lni lni-lock-alt"></i> Generate passwords</button>
    </div>
    <div class="grid-container">
        <div id="mmm" class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
      </div>    
        <script src="index.js"></script>
    </div>
    </body>
</html>

回答1

不确定我会说这是可扩展的,但是对于字母,我会将其添加到数组中

const letters = ["A","B".."Z"]

function generateRandomLetterArray(){
let randomLetterArr = []

for(i=0, i<{how every many random letters you want}, i++){

let randomNumber = {math random number between 0 and 25 (because there are 26 letters)}

randomLetter = letters[randomNumber]
randomLetterArr.push(randomLetter)
}
}

此时你在 randomLetterArr 中有一堆随机字母