时间戳

首页 > 解决方案 > 嗨，我怎样才能让 OPTION 在里面有一个值？并使其更改消息为选择另一个选项？

javascript - 嗨，我怎样才能让 OPTION 在里面有一个值？并使其更改消息为选择另一个选项？

问题描述

我想var s接收选项值，以便能够进行除法而不必将直接数字放入 var 中，例如：n1 / value.usd(eur = 5.58)，然后<h5>根据选择的选项示例更改文本：

<body>
    <div id="tabela">
        <h1 id="title">Conversor de Real para Dólar</h1>
        <div id="area">
            <strong>R$</strong><input type="number" name="txtn1" id="txtn1"> PARA:
            <select name="txtn2" id="txtn2">
                <option value = "usd">USD - Dólar</option> <!--The option that i want put a value-->
                <option value="eur">EUR - Euro</option>
                <option value="gbp">GBP - Libra Esterlina</option>
                <option value="cad">CAD - Dólar Canadense</option>
                <option value="jpy">JPY - Yen</option>
                <option value="cny">CNY - Yuan</option>
            </select>
            <input type="button" value="CONVERTER" onclick="converter()">
            <div id="resul">Clique em <strong>converter</strong> para ver o resultado em <strong>U$</strong>!</div>
            <h5>1 Dólar americano igual a 5,58 Real brasileiro</h5> <!--The text that i want change conform the option-->
        </div>
    </div>   
</body>

JS代码

function converter(){
    let tn1 = document.querySelector('input#txtn1');
    let resul = document.querySelector('div#resul');
    let n1 = Number(tn1.value);
    let s = n1/5.58
    resul.innerHTML = ` Você tinha: <strong>R$${n1.toFixed(2).replace(".",",").toLocaleString('pt-BR',{style: 'currency', currency:'BRL'})}</strong><br>
    Agora você tem: <strong>U$${s.toFixed(2).replace(".",",").toLocaleString('USA',{style: 'currency', currency:'USD'})}</strong><br>
    Clique em <strong>converter</strong> para converter novamente.`
}

标签： javascript

解决方案

只需简单地添加一个事件监听器并监听变化..

const txtn2 = document.getElementById('txtn2');

txtn2.addEventListener('change', function(e){
  console.log(e.target.value)
})



function converter(option){console.log(option)}
<body>
    <div id="tabela">
        <h1 id="title">Conversor de Real para Dólar</h1>
        <div id="area">
            <strong>R$</strong><input type="number" name="txtn1" id="txtn1"> PARA:
            <select name="txtn2" id="txtn2">
                <option value = "usd">USD - Dólar</option> <!--The option that i want put a value-->
                <option value="eur">EUR - Euro</option>
                <option value="gbp">GBP - Libra Esterlina</option>
                <option value="cad">CAD - Dólar Canadense</option>
                <option value="jpy">JPY - Yen</option>
                <option value="cny">CNY - Yuan</option>
            </select>
            <input type="button" value="CONVERTER" onclick="converter()">
            <div id="resul">Clique em <strong>converter</strong> para ver o resultado em <strong>U$</strong>!</div>
            <h5>1 Dólar americano igual a 5,58 Real brasileiro</h5> <!--The text that i want change conform the option-->
        </div>
    </div>   
</body>

推荐阅读