如何实现DNA到RNA序列的顺序转换与结果展示？

你的代码存在几个核心问题导致无法正常实现序列转换，下面是修复后的完整代码及问题说明：

原代码问题分析 #

• 页面加载时就获取输入框值，点击按钮时不会重新读取用户最新输入的内容
• replace函数仅检查整个DNA字符串是否包含某一碱基，而非逐个字符转换，因此无论输入多长序列，只会生成一个RNA碱基
• 按钮绑定的getInputValue()函数不存在，和定义的replace函数不匹配
• 未处理大小写，输入大写碱基会无法识别
• 结果赋值代码在函数外部，页面加载时就执行，此时还没有转换结果

修复后的代码 #

HTML部分 #

<input placeholder="输入DNA序列..." id="input1">
<button type="button" onclick="convertDnaToRna()" id="button1">转换为RNA</button>
<div id="total"></div>

JavaScript部分 #

function convertDnaToRna() {
    // 点击按钮时才获取最新输入的DNA序列，统一转为小写处理
    const dna = document.getElementById("input1").value.toLowerCase();
    const rna = [];
    
    // 逐个遍历DNA的每个字符进行转换
    for (const char of dna) {
        switch(char) {
            case 'a':
                rna.push('u');
                break;
            case 't':
                rna.push('a');
                break;
            case 'c':
                rna.push('g');
                break;
            case 'g':
                rna.push('c');
                break;
            default:
                // 处理无效字符，可选提示
                rna.push('?');
                break;
        }
    }
    
    // 将数组转为字符串后展示结果，转为大写更符合RNA序列习惯
    document.getElementById("total").innerHTML = rna.join('').toUpperCase();
}

关键修改说明 #

• 把输入值的获取放到转换函数内部，确保每次点击按钮都读取最新输入
• 使用for...of循环逐个处理DNA序列的每个字符，保证转换顺序和输入完全一致
• 用switch语句替代原有的else if判断，逻辑更清晰，能精准处理每个字符
• 统一将输入转为小写，最终结果转为大写，兼容大小写输入场景
• 按钮点击事件绑定到正确的转换函数convertDnaToRna
• 添加无效字符处理，避免转换过程出错
• 用join('')把RNA数组转为字符串，解决原代码直接输出数组显示逗号分隔内容的问题

内容的提问来源于stack exchange，提问作者My Info