JavaScript入门问题：如何将input值传入encriptar函数（禁用getElementById）

核心问题分析 #

1. 输入值获取时机错误：页面加载时就读取input.value，此时输入框为空，后续用户输入的内容无法同步到变量中。
2. 按钮事件绑定错误：直接执行encriptar(input.value)会在页面加载时立即调用函数，而非点击按钮时触发，且传递的是初始空值。
3. 加密函数逻辑缺陷：多个独立if语句导致元音字符会同时触发替换规则和else分支，造成重复字符。

修正后的完整代码 #

<input>
<button>Encriptar</button>
<div class="resultado"></div> <!-- 新增用于显示加密结果的元素 -->

<script>
// 获取DOM元素（仅使用querySelector）
var input = document.querySelector("input");
var button = document.querySelector("button");
var resultado = document.querySelector(".resultado");

function encriptar(palabra){
    var mensajeEncriptado = "";
    for (var i = 0; i < palabra.length; i++) {
        var char = palabra[i];
        if (char === "a"){
            mensajeEncriptado += "ai";
        } else if (char === "e"){
            mensajeEncriptado += "enter";
        } else if (char === "i"){
            mensajeEncriptado += "imes";
        } else if (char === "o"){
            mensajeEncriptado += "ober";
        } else if (char === "u"){
            mensajeEncriptado += "utaf";
        } else {
            mensajeEncriptado += char;
        }
    }
    return mensajeEncriptado;
}

// 绑定按钮点击事件
button.onclick = function() {
    var currentValue = input.value.trim(); // 获取当前输入框的实时值
    if (currentValue) {
        var encryptedText = encriptar(currentValue);
        resultado.textContent = encryptedText; // 显示加密结果
    } else {
        resultado.textContent = "请输入要加密的内容";
    }
};
</script>

关键修正点说明 #

• 点击事件处理：用匿名函数作为onclick回调，确保点击按钮时才读取当前输入值并执行加密。
• 加密逻辑优化：将独立if改为else if，保证每个字符只匹配一个规则，避免重复添加原字符。
• 结果展示：新增div.resultado元素用于输出加密内容，让操作结果可视化。

内容的提问来源于stack exchange，提问作者JAR.