JavaScript摩尔斯电码翻译器输入输出功能异常排查求助

你的代码存在语法错误、逻辑错误和事件处理错误，导致无法正常接收输入并输出结果，具体问题和修正方法如下：

一、eng2mc函数的问题 #

1. 语法错误：if item==null缺少括号，正确写法是if (item == null)
2. 循环逻辑混乱：while循环嵌套在for循环内部，且return op写在循环里，函数会在第一次循环就直接返回，无法处理完整输入；同时重复声明let op和let i，覆盖了外部变量，导致逻辑失效
3. 未处理字符大小写：如果输入大写字母，若eng对象的键是小写，会找不到对应摩尔斯码，需要统一字符大小写
4. 摩尔斯码格式问题：字符间的摩尔斯码需要用空格分隔，原代码未做处理，且空字符的替换逻辑错误

二、事件监听的问题 #

1. 传入错误的参数：eng2mc(keypress)里的keypress是事件类型，不是输入框内容，应该传入input.value
2. 事件类型不合适：keypress无法捕获退格、删除等操作，改用input事件可以实时监听所有输入变化
3. 错误设置textarea内容：textarea的内容应该用value属性设置，而非innerHTML
4. 未声明变量：out变量未用let/const声明，会变成全局变量，存在隐患

三、缺失摩尔斯码映射表 #

你代码中用到的eng对象未定义，必须先声明包含英文字符到摩尔斯码的映射关系

修正后的完整代码 #

1. 摩尔斯码映射表 #

const eng = {
  'a': '.-', 'b': '-...', 'c': '-.-.', 'd': '-..', 'e': '.', 
  'f': '..-.', 'g': '--.', 'h': '....', 'i': '..', 'j': '.---', 
  'k': '-.-', 'l': '.-..', 'm': '--', 'n': '-.', 'o': '---', 
  'p': '.--.', 'q': '--.-', 'r': '.-.', 's': '...', 't': '-', 
  'u': '..-', 'v': '...-', 'w': '.--', 'x': '-..-', 'y': '-.--', 
  'z': '--..', '0': '-----', '1': '.----', '2': '..---', 
  '3': '...--', '4': '....-', '5': '.....', '6': '-....', 
  '7': '--...', '8': '---..', '9': '----.', ' ': '/'
};

2. 修正后的eng2mc函数 #

function eng2mc(string) {
  // 统一转成小写，兼容大写输入
  const lowerStr = string.toLowerCase();
  const morseArr = [];
  
  for (const char of lowerStr) {
    // 找到对应摩尔斯码，找不到则保留原字符（或替换为空格）
    const morse = eng[char] || char;
    morseArr.push(morse);
  }
  
  // 字符间用空格分隔，返回最终字符串
  return morseArr.join(' ');
}

3. 修正后的事件监听代码 #

const input = document.getElementById('input');
const output = document.getElementById('output');

input.addEventListener('input', function() {
  const inputValue = input.value.trim();
  const result = eng2mc(inputValue);
  // textarea用value设置内容
  output.value = result;
});

4. HTML代码（无需修改，保持原结构即可） #

<form class="boxparent" method="post">
    <textarea class="textbox boxchild" id="input" rows="10" cols="80" placeholder="Enter text here"></textarea>
    <textarea readonly class="textbox boxchild2" id="output" rows="10" cols="80"></textarea>
</form>

内容的提问来源于stack exchange，提问作者1440p