Javascript下拉菜单货币转换器

时间:2014-11-27 00:25:12

标签: javascript html drop-down-menu currency

大家好,我需要你帮助 它假设您在选择选项后转换输入的值并单击转换。

HTML CODE:/(我不确定如何使用java脚本下拉菜单)

    <html>
    <body>
    <form>
    <select name="converts" id="Selection">
    <option>Chose Option</option>
     <option value="1" >Currency 1 to Currency2</option>
     <option value="2" >Currency 2 to Currency1</option>
    </select>
     <br><br>
    Value <input type="text" id="value"><br>
    Conversion <input type="text" id="conversion"><br><br>

    <input type="Button" onclick="Conversion()" value="Convert">
    </form>
    </body>
    </html>

JAVASCRIPT CODE:

   <script type="text/javascript">
   function Conversion() 
   {
   var val = document.getElementById ("value").value;
   var madeSelection =  document.getElementById ("Selection").value;

    if(madeSelection==1( var ans= +value * 1.37); )){
    if(madeSelection==2 ( var ans= +value * 1.30; )){

                    }
                }

    conversion.value = ans;
    }
    </script>

3 个答案:

答案 0 :(得分:0)

这应该适合你:

function Conversion() {
    var val = document.getElementById("value").value,
    madeSelection = document.getElementById("Selection").value,
    ans

    if (madeSelection == 1) ans = val * 0.37;
    if (madeSelection == 2) ans = val * 0.30;
    if (madeSelection == 3) ans = val * 2.70;
    if (madeSelection == 4) ans = val * 0.80;
    if (madeSelection == 5) ans = val * 3.38;
    if (madeSelection == 6) ans = val * 1.25;
    document.getElementById("conversion").value = ans;
}
<form>
    <select name="converts" id="Selection">
        <option>Chose Option</option>
        <option value="1">EC to US</option>
        <option value="2">EC to Euro</option>
        <option value="3">US to EC</option>
        <option value="4">US to Euro</option>
        <option value="5">Euro to EC</option>
        <option value="6">Euro to US</option>
    </select>
    <br>
    <br>Value
    <input type="text" id="value">
    <br>Conversion
    <input type="text" id="conversion">
    <br>
    <br>
    <input type="Button" onclick="Conversion()" value="Convert">
</form>

答案 1 :(得分:0)

相反,您应使用 SWITCH 进行大量 IF 语句。

这是正确的方法

JS

function Conversion() 
{
  var val = parseInt(document.getElementById ("value").value);
  var madeSelection =  parseInt(document.getElementById ("Selection").value);

  switch(madeSelection)
  {
    case 1:
       var converted =  val * 0.37; //EC to US
       break;
    case 2:
       var converted =  val * 0.30; //EC to EUR
       break;
    case 3:
       var converted =  val * 2.70; //US to EC
       break;
     //ETC....
    default:
       alert('You chose wrong option'); // if user chose wrong option, send him message
       break;           
  } 

  document.getElementById ("conversion").value = converted;
  return false; //prevent for submit form
}

这是小提琴:http://jsfiddle.net/1cdkvpms/

答案 2 :(得分:0)

有几个问题导致此功能失效:

您声明了一个名为val的变量,您没有使用它。代码中的其他任何位置都称为value

var val = document.getElementById ("value").value;

较旧的浏览器可能无法处理value元素的select属性

var madeSelection =  document.getElementById ("Selection").value;

您的if语句格式错误(并且由于某种原因而嵌套),并且某些操作很奇怪。

if(madeSelection==1( var ans= +value( 0.37); )){
if(madeSelection==2 ( var ans= +value * 0.30; )){
...

格式正确后,您的代码为:

if (madeSelection == 1(var ans = +value(0.37);)) {
    if (madeSelection == 2(var ans = +value * 0.30;)) {
        if (madeSelection == 3(var ans = +value * 2.70;)) {
            if (madeSelection == 4(var ans = +value * 0.80;)) {
                if (madeSelection == 5(var ans = +value * 3.38;)) {
                    if (madeSelection == 6(var ans = +value * 1.25;)) {}
                }
            }
        }
    }
}

写得更恰当时,应该是:

if (madeSelection == 1) {
    var ans = +value(0.37);
}
if (madeSelection == 2) {
    var ans = +value * 0.30;
}
if (madeSelection == 3) {
    var ans = +value * 2.70;
}
if (madeSelection == 4) {
    var ans = +value * 0.80;
}
if (madeSelection == 5) {
    var ans = +value * 3.38;
}
if (madeSelection == 6) {
    var ans = +value * 1.25;
}

虽然:

  • ans变量以及所有其他变量应该在函数的顶部声明(因为这是他们实际上已经声明的地方,查找变量提升)。
  • 我不确定你为什么要用+为右手分配作为前缀。
  • value不是一个功能,但如果madeSelection == 1,您显然会尝试将其用作一个功能。

最后,您引用了一个名为conversion的变量,该变量尚未定义。这仍然可能有效,因为您有一个id conversion的输入,并且大多数(但不是全部)浏览器会将id存储为指向该元素的全局变量。

此外,当您有多个if语句时,您可能不会考虑使用switch语句。

总之,它看起来应该更像这样:

function Conversion() {
    var value = document.getElementById("value").value,
        conversion = document.getElementById("conversion"),
        madeSelection = document.getElementById("Selection"), // get the select
        selection = madeSelection.options[madeSelection.selectedIndex].value, // get the selected option
        ans = 0;
    value = parseFloat(value);
    if (!isNaN(value)) {
        switch (selection) {
            case "6":
                ans = value * 1.25;
                break;
            case "5":
                ans = value * 3.38;
                break;
            case "4":
                ans = value * 0.8;
                break;
            case "3":
                ans = value * 2.7;
                break;
            case "2":
                ans = value * 0.3;
                break;
            case "1":
                ans = value * 0.37;
                break;
            default:
                ans = 0;
                break;
        }
    }
    conversion.value = ans;
}
<select name="converts" id="Selection">
    <option>Choose Option</option>
    <option value="1" >EC to US</option>
    <option value="2" >EC to Euro</option>
    <option value="3" >US to EC</option>
    <option value="4" >US to Euro</option>
    <option value="5" >Euro to EC</option>
    <option value="6" >Euro to US</option>
</select>
<br />
<label for="value">Value</label>
<input type="text" id="value"><br>
<label for="conversion">Conversion</label>
<input type="text" id="conversion"><br><br>
<input type="Button" onclick="Conversion()" value="Convert">