如何用Vanilla JavaScript实现点击按钮生成随机值？现有方法失效

云原生阿岚

2026-8-17

修复点击生成随机值的JavaScript代码

原代码存在的问题

绑定了错误的事件：监听document的keyup事件，而非生成按钮的click事件，逻辑完全偏离需求
变量text未初始化，直接拼接会导致结果带undefined前缀
硬编码生成长度为5，未使用按钮上data-generated-value-length指定的32位长度
函数未执行，事件监听从未被注册

修复后的代码

HTML（无需修改，保留原结构）

<div class="input-group">
  <input type="text" id="webservice_key_key" name="webservice_key[key]" required="required" class="form-control">
  <span class="input-group-btn ml-1">
    <button class="btn btn-secondary js-generator-btn" type="button" data-target-input-id="webservice_key_key" data-generated-value-length="32">Generate</button>
  </span>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const generateBtn = document.querySelector('.js-generator-btn');
  
  generateBtn.addEventListener('click', function() {
    const targetId = this.dataset.targetInputId;
    const length = parseInt(this.dataset.generatedValueLength, 10);
    const input = document.getElementById(targetId);
    const possibleChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    
    let randomStr = '';
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * possibleChars.length);
      randomStr += possibleChars.charAt(randomIndex);
    }
    
    input.value = randomStr;
  });
});