JavaScript实现鲸鱼语翻译器输出undefined问题求助

存在的问题 #

• 按钮绑定逻辑错误：HTML的翻译按钮点击事件绑定的是updateOutput()，没有调用翻译逻辑，也没有传入参数，执行后自然输出undefined
• whaleTalk函数无返回值：在translateInput中调用该函数获取翻译结果时，只能拿到undefined
• 翻译逻辑判断错误：whaleTalk内部的判断两个分支都是匹配字符e，原本要匹配u的分支永远无法触发
• DOM操作属性错误：输入框是input元素，修改值应该用value属性而不是innerHTML
• 页面初始加载逻辑错误：页面加载时输入框为空，直接调用whaleTalk()和updateOutput()会直接输出空值或者undefined
• HTML标签不规范：标题标签开头用的<h2>，结尾用的</h1>，存在语法错误

修复后的代码 #

JS代码（whaletranslator.js） #

// 处理翻译逻辑，接收输入字符串，返回翻译结果
function whaleTalk(input) {
  const vowels = ['a', 'e', 'i', 'o', 'u'];
  let resultArray = [];
  for (var i = 0; i < input.length; i++) {
    for (var j = 0; j < vowels.length; j++) {
      // 兼容大写元音输入
      if (input[i].toLowerCase() == vowels[j]) {
        if (input[i].toLowerCase() == 'e') {
          resultArray.push('ee');
        } else if (input[i].toLowerCase() == 'u') {
          resultArray.push('uu');
        } else {
          resultArray.push(input[i]);
        }
      }
    }
  }
  return resultArray.join('').toUpperCase();
}

// 读取输入、触发翻译、更新输出
function translateInput() {
  let userInput = document.getElementById('input').value;
  let translateResult = whaleTalk(userInput);
  updateOutput(translateResult);
}

// 更新输出区域内容
function updateOutput(input) {
  document.getElementById('output').innerHTML = input;
}

HTML代码 #

<!DOCTYPE html>
<head>
   <title>Whale Talk Translator</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <link href="whaletranslator.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
   <header style="color: white;">Whale Talk Translator </header>
<!-- 修正标签不匹配问题 -->
<h2>Input anything you want into the box below and hit the button to translate it.</h2>
   <div class="translatorBox">
      <input value="" id="input" type="text" class="inputBox" placeholder="Text to translate">
      <br>
      <div class="container">
         <div class="center">
            <!-- 修改按钮点击事件绑定 -->
            <button class="translateButton" onclick="translateInput()">Translate</button>
         </div>
       </div>
      
      <div class="container">
         <div class="center">
            <button class="reloadButton" onClick="window.location.reload();">Reload</button>
         </div>
       </div>
   </div>
   <p style="padding: 2em">Translated input:</p>
   <div class="output">
       <p id="output"></p>
   </div>
</body>
<script src="whaletranslator.js" type="text/javascript"></script>
</html>

内容的提问来源于stack exchange，提问作者theo j