HTML按钮无法调用JS函数idk问题排查求助

问题 #

问题代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button type='button' onClick=idk>Encrypt</button>
  <script src="script.js"></script>
  
</body>

</html>

/*lol css be empty*/

function idk() {
let cypher = {A:"G",B:"L",C:"Z",D:"E",E:"Y",F:"R",G:"D",H:"N",I:"K",J:"W",K:"J",L:"B",M:"Q",N:"F",O:"S",P:"C",Q:"V",R:"X",S:"I",T:"O",U:"M",V:"T",W:"A",X:"U",Y:"H",Z:"P"};
var answer  = prompt('What cypher are you going to use 1 - 26', 1);
var encrypt = prompt('Enter text you want encrypted', 'abc');
var output  = "";

if (answer == 1) {
    encrypt = encrypt.toUpperCase();

    encrypt = encrypt.replace(/[^A-Z]/gm, '');
    encrypt = encrypt.split('');

    encrypt = encrypt.map(letter=> {
        var letterIndex = letter.charCodeAt(0) - 65;
        return Object.values(cypher)[letterIndex];
    })
    document.write(encrypt.join(''));
    
}
function seedCypher() {
    let cypherVals = [], randomLetter;
    while(cypherVals.length < 26){
        do {
            randomLetter = String.fromCharCode(Math.floor(Math.random() * 26) + 65);
        } while(cypherVals.indexOf(randomLetter) !== -1);
        cypherVals.push(randomLetter);
    }
    
    let cypherOutput = {};
    cypherVals.forEach((val, i)=>cypherOutput[String.fromCharCode(i+ 65)] = val);
    return cypherOutput;
}
cypher = seedCypher();
}

问题描述 #

编写了上述包含加密功能的前端代码，页面中的Encrypt按钮通过onClick事件绑定了idk函数，但点击按钮后无任何响应。已确认函数语法正确，且尝试过将函数名用单引号或双引号包裹，问题仍未解决，恳请协助排查原因并修复。

解决方案 #

核心问题分析 #

按钮点击无响应的直接原因是onClick事件绑定写法错误：

• 原代码中onClick=idk仅引用了函数对象，未触发函数执行，必须添加括号()才能调用函数。
• 若仅给函数名加引号（如onClick="idk"），依然不会执行函数，必须写成onClick="idk()"的形式。

修复步骤 #

1. 修正HTML按钮的onClick属性
   将按钮代码修改为：

   <button type='button' onClick="idk()">Encrypt</button>
   

   这里通过添加()触发函数执行，同时用双引号包裹事件处理代码，符合HTML属性规范。

2. 可选优化：调整JavaScript逻辑
   原代码中seedCypher函数定义在idk函数内部，且末尾的cypher = seedCypher();会覆盖初始密码映射，但这不是按钮无响应的原因。若需保留初始映射，可将该行代码移至idk函数外部，或根据需求调整逻辑。

修复后的完整代码 #

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button type='button' onClick="idk()">Encrypt</button>
  <script src="script.js"></script>
  
</body>

</html>

JavaScript（保留原逻辑）

function idk() {
let cypher = {A:"G",B:"L",C:"Z",D:"E",E:"Y",F:"R",G:"D",H:"N",I:"K",J:"W",K:"J",L:"B",M:"Q",N:"F",O:"S",P:"C",Q:"V",R:"X",S:"I",T:"O",U:"M",V:"T",W:"A",X:"U",Y:"H",Z:"P"};
var answer  = prompt('What cypher are you going to use 1 - 26', 1);
var encrypt = prompt('Enter text you want encrypted', 'abc');
var output  = "";

if (answer == 1) {
    encrypt = encrypt.toUpperCase();

    encrypt = encrypt.replace(/[^A-Z]/gm, '');
    encrypt = encrypt.split('');

    encrypt = encrypt.map(letter=> {
        var letterIndex = letter.charCodeAt(0) - 65;
        return Object.values(cypher)[letterIndex];
    })
    document.write(encrypt.join(''));
    
}
function seedCypher() {
    let cypherVals = [], randomLetter;
    while(cypherVals.length < 26){
        do {
            randomLetter = String.fromCharCode(Math.floor(Math.random() * 26) + 65);
        } while(cypherVals.indexOf(randomLetter) !== -1);
        cypherVals.push(randomLetter);
    }
    
    let cypherOutput = {};
    cypherVals.forEach((val, i)=>cypherOutput[String.fromCharCode(i+ 65)] = val);
    return cypherOutput;
}
cypher = seedCypher();
}

内容的提问来源于stack exchange，提问作者Mippy Magic