JavaScript开发阿根廷比索-美元双向货币转换器：下拉选择框值获取问题求助

看起来你卡在获取select下拉框的选中值上了，这是个很常见的小问题，我来帮你梳理下问题所在并给出解决方案。

问题分析 #

你的JavaScript代码存在两个关键问题：

• 页面加载时就尝试通过document.getElementsByTagName('option')获取option的value，但这个方法返回的是所有option元素的集合，并非单个元素，因此它没有.value属性，导致dolarapeso和pesodolar的值始终为undefined，后续的条件判断完全失效。
• 就算获取方式正确，你也只在页面初始化时获取了一次值，没有在用户点击转换按钮时重新获取当前的选中状态，用户后续的选择无法被识别。

修正后的完整代码 #

JavaScript代码（核心修正部分）

// 仅在页面加载时获取一次select元素
var opciones = document.getElementById('selector');

function convertir() {
    // 获取当前输入的数值，并转为浮点数
    var A = parseFloat(document.getElementById('cantidad').value);
    // 汇率数组，保留你的原始定义
    var B = [145, 157.7, 157.9, 90.2];
    var C = [];

    // 关键：在函数内部获取当前select的选中值
    var selectedOption = opciones.value;

    // 输入验证：确保用户输入有效数字
    if (isNaN(A) || A < 0) {
        alert('请输入一个有效的正数');
        return;
    }

    // 根据选中的转换方向计算
    if (selectedOption === "1") {
        // 美元转比索：乘以对应汇率
        C = B.map(rate => A * rate);
    } else if (selectedOption === "2") {
        // 比索转美元：除以对应汇率
        C = B.map(rate => A / rate);
    }

    // 更新结果显示，保留两位小数更符合货币格式
    document.getElementById('a').innerHTML = C[0].toFixed(2);
    document.getElementById('b').innerHTML = C[1].toFixed(2);
    document.getElementById('c').innerHTML = C[2].toFixed(2);
    document.getElementById('d').innerHTML = C[3].toFixed(2);
}

你的原始CSS代码（无需修改）

body {
 background-color: #ffe3de;
 height: 1024px;
}
main {
 width: 1024px;
 margin-right: auto;
 margin-left: auto;
}
header {
 width: 1024px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 25px;
}
footer {
 width: 1024px;
 height: 350px;
 margin-right: auto;
 margin-left: auto;
}
h1 {
 font-family: Barlow;
 font-weight: 500;
}
h3 {
 font-family: Barlow;
}
h4 {
 font-family: Barlow;
 font-style: italic;
}
p {
 font-family: IBM Plex Sans;
}
#info {
 width: 90%;
 height: 300px;
 background-color: #03506f;
 border-radius: 4px;
 padding: 4px;
 margin-bottom: 20px;
 color: white;
 text-align: center;
}
#tipos {
 margin-left: auto;
 margin-right: auto;
 height: 150px;
 width: 30%;
 background-color: #dddddd;
 border-radius: 5px;
 text-align: center;
 font-weight: bold;
}
#blu {
 color: blue;
}
#mayorista {
 color: #556b2f;
}
#tarjeta {
 color: #e6a80e;
}
#Oficial {
 color: #2aae2a;
}
#areadecalculo {
 width: 90%;
 height: 500px;
 background-color: #a3ddcb;
 border-radius: 5px;
 margin-bottom: 25px;
 margin-top: 25px;
}
#cant {
 margin-left: 60px;
 font-size: 25px;
 font-weight: bold;
 color: white;
 font-family: Barlow;
}
#cantidad {
 width: 30%;
 height: 28px;
 margin-left: 25px;
 margin-top: 15px;
 border-radius: 4px;
 background-color: #ffe3de;
}
#selector {
 width: 30%;
 height: 28px;
 margin-left: 5px;
 border-radius: 4px;
 background-color: #ffe3de;
}
#convert {
 margin-left: 400px;
 font-size: 25px;
 color: white;
 font-weight: bold;
}
#conversor {
 display: block;
 margin-top: 20px;
 margin-left: 450px;
 height: 30px;
 width: 10%;
 border-radius: 4px;
 font-family: IBM Plex Sans;
 background-color: #0a043c;
 color: white;
}
#resultado {
 width: 80%;
 height: 150px;
 margin-top: 35px;
 margin-left: 80px;
 border-radius: 4px;
 background-color: #ffe3de;
}
#display {
 margin-top: 50px;
 margin-right: 30px;
}
.indicadores {
 margin-right: 10px;
 margin-left: 10px;
 line-height: 150px;
 font-family: Barlow;
}
#a {
 margin-left: 5px;
 color: blue;
 font-size: 18px;
 font-style: italic;
 font-weight: bold;
}
#b {
 margin-left: 5px;
 color: #556b2f;
 font-size: 18px;
 font-style: italic;
 font-weight: bold;
}
#c {
 margin-left: 5px;
 color: #e6a80e;
 font-size: 18px;
 font-style: italic;
 font-weight: bold;
}
#d {
 color: #2aae2a;
 font-size: 18px;
 font-style: italic;
 font-weight: bold;
}
#powered-footer {
 float: left;
}

你的原始HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
 <meta charset="utf-8">
 <title>Conversor de Monedas</title>
 <link rel="stylesheet" href="css/style.css">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;1,100&amp;family=IBM+Plex+Sans:wght@400;700&amp;display=swap" rel="stylesheet">
</head>
<body>
 <header>
 <h1 id="titulo">Conversor de Moneda</h1>
 <p id="powered"> Powered by CafeEnJarritoWeb</p>
 <img id="powered" src="" alt="" id="logo">
 </header>
 <main>
 <div id="info">
 <h3>¡Averigua la cotización de todos los tipos de dólares al segundo!</h3>
 <p>Con nuestro conversor de moneda para la Argentina, podes convertir el monto que necesites y te haremos la conversión a todos los diferentes tipos de Dolar vigentes en nuestro país.</p>
 <div id="tipos">
 <h4 id="blu">Dólar Blu</h4>
 <h4 id="mayorista">Dólar Mayorista</h4>
 <h4 id="tarjeta">Dólar Tarjeta</h4>
 <h4 id="Oficial">Dólar Oficial</h4>
 </div>
 </div>
 <div id="areadecalculo">
 <span id="cant">Cantidad:</span><input id="cantidad" type="number" name="cantidad" value="" placeholder="Indica la cantidad de Dolares a convertir a Pesos">
 <select id="selector" class="seleccionador" name="monedas">
 <option value="1">de Dólares a Pesos</option>
 <option value="2"> de Pesos a Dólares</option>
 </select>
 <button type="button" name="conversor" id="conversor" onclick="convertir()">¡Convertir!</button>
 <div id="resultado">
 <div id="display">
 <span class="indicadores">Dolar Blu: <span id="a"> </span></span>
 <span class="indicadores">Dólar Mayorista:<span id="b"> </span></span>
 <span class="indicadores">Dólar Tarjeta:<span id="c"></span></span>
 <span class="indicadores">Dólar Oficial:<span id="d"></span></span>
 </div>
 </div>
 </div>
 </main>
 <footer>
 <p id="powered-footer"> Powered by CafeEnJarritoWeb</p>
 <img id="powered-footer" src="" alt="" id="logo">
 </footer>
 <script type="text/javascript" src="js/conversor.js"></script>
</body>
</html>

额外优化建议 #

如果你想让用户体验更好，可以动态修改输入框的placeholder：

// 给select添加change事件监听器
opciones.addEventListener('change', function() {
    var input = document.getElementById('cantidad');
    if (this.value === "1") {
        input.placeholder = "Indica la cantidad de Dólares a convertir a Pesos";
    } else {
        input.placeholder = "Indica la cantidad de Pesos a convertir a Dólares";
    }
});

内容的提问来源于stack exchange，提问作者Matute VIP