2016-11-28 18 views
-3

我想寫一個與HTML和CSS代碼組合的交換轉換器。我得到的問題是,我無法將數字從一種貨幣轉換爲另一種貨幣,而有兩種不同的方框,一種用於輸入價值,另一種用於返回交換價值。我的程序根本不會轉換任何東西。如果你能提供幫助,我將不勝感激。 下面是我的全部代碼:在javascript中交換程序

 <html> 
    <head> 
    <title> Converter </title> 
    <style type="text/css"> 
    div{ 
    width:600px; 
    height:300px; 
    background-color:blue; 
    margin-right: 120px; 
    margin-top: 40px; 
    } 
    #box1{ 
    width: 200px; 
    height: 200px; 
    background-color:red; 
    } 
    #box2{ 
    width:200px; 
    height: 200px; 
    background-color:red; 
    } 
    p{ 
    font-size:12pt; 
    font-family: arial, sans-serif; 
    } 
    nav { font-weight : bold; 
    color: white; 
    border : 2px solid royalblue; 
    text-align: center ; 
    width: 10em; 
    background-color : royalblue;} 
    nav ul { display: none; 
    list-style: none; 
    margin : 0; 
    padding: 0;} 
    nav ul li { border-top: 2px solid royalblue; 
    background-color : white; 
    width: 10em; 
     color: black;} 
     nav ul li:hover { background-color : powderblue;} 
     a { text-decoration: none;} 
     </style> 
     <script type="text/javascript"> 
     function convert(){ 
     if(document.getElementByOptionValue("txtList1")==Euro(EUR) &&     document.getElementByOptionValue("txtList2")==Albania(LEK)){ 
     var eur=document.getElementById("first"); 
     var e=parseFloat(eur.value); 
     if(!validateForm()) 
     return; 
     var l=e*135.82; 
     var lek=document.getElementById("second"); 
     lek.value=l; 
     } 
     if(document.getElementByOptionValue("txtList1")==Albania(LEK) && document.getElementByOptionValue("txtList2")==Euro(EUR)){ 
     var lek=document.getElementById("first"); 
     var l=parseFloat(lek.value); 
     if(!validateForm()) 
     return; 
     var e=l*138.92; 
     var eur=document.getElementById("second"); 
     lek.value=l; 
     } 
     } 
     function validateForm(){ 
     var f=document.getElementById("first"); 
     if(f.value==""){ 
     alert("Jepni nje vlere"); 
     f.focus(); 
     return false; 
     } 
     if(isNaN(f.value){ 
     alert("Vlera qe dhate nuk eshte numer"); 
     f.focus(); 
     return false; 
     } 
     return true; 
     } 
     </script> 
     </head> 
     <body> 
     <div id="box1"> 
     <form action=""> 
     <p>Type a country or a currency</p> 

     <p> <label for="txtList" > 
     <input type="text" id="txtList1" 
     placeholder="United States Dollars (USD)" list="currencies"/> 
    <datalist id="currencies"> 
    <option value="United States Dollars (USD)"> 
    <option value="Euro(EUR)"> 
    <option value="Albania (LEK)"> 
    <option value="Paunds (PAUND)"> 

    </datalist> 
    </label></input></p> 
    <nav>Browse All 
    <ul> 
    <li><a href = "#" >United States Dollars (USD)</a></li> 
    <li><a href = "#" >Euro(EUR)</a></li> 
    <li><a href = "#" >Albania (LEK)</a></li> 
    <li><a href = "#" >Paunds (PAUND)</a></li> 

    </ul> 
    </nav> 
    <p>Please enter an amount </p> 
    <p><label>Currency: 
    <input name = "name" type = "text" id="first" size = "15" 
    maxlength = "10"> 
    </label></p></div> 
    <input type="button" value="=" onclick="convert()"/> 
    <div id="box2"> 
    <p>Type a country or a currency</p> 

    <p> <label for="txtList" > 
    <input type="text" id="txtList2" 
    placeholder="Euro (EUR)" list="currencies"/> 
    <datalist id="currencies"> 
    <option value="United States Dollars (USD)"> 
    <option value="Euro(EUR)"> 
    <option value="Albania (LEK)"> 
    <option value="Paunds (PAUND)"> 

    </datalist> 
    </label></input></p> 
    <nav>Browse All 
    <ul> 
    <li><a href = "#" >United States Dollars (USD)</a></li> 
    <li><a href = "#" >Euro(EUR)</a></li> 
    <li><a href = "#" >Albania (LEK)</a></li> 
    <li><a href = "#" >Paunds (PAUND)</a></li> 

    </ul> 
    </nav> 
    <p>Please enter an amount </p> 
    <p><label>Currency: 
    <input name = "name" type = "text" id="second" size = "15" 
    maxlength = "10"> 

    </label></p></div></form> 
    </body> 
    </html> 

短代碼:

 function convert(){ 
    if(document.getElementByOptionValue("txtList1")==Euro(EUR) && document.getElementByOptionValue("txtList2")==Albania(LEK)){ 
    var eur=document.getElementById("first"); 
    var e=parseFloat(eur.value); 
    if(!validateForm()) 
     return; 
    var l=e*135.82; 
    var lek=document.getElementById("second"); 
    lek.value=l; 
     } 
    if(document.getElementByOptionValue("txtList1")==Albania(LEK) && document.getElementByOptionValue("txtList2")==Euro(EUR)){ 
    var lek=document.getElementById("first"); 
    var l=parseFloat(lek.value); 
    if(!validateForm()) 
    return; 
    var e=l*138.92; 
    var eur=document.getElementById("second"); 
    lek.value=l; 
    } 
    } 
    function validateForm(){ 
    var f=document.getElementById("first"); 
    if(f.value==""){ 
    alert("Jepni nje vlere"); 
    f.focus(); 
    return false; 
    } 
    if(isNaN(f.value)){ 
    alert("Vlera qe dhate nuk eshte numer"); 
    f.focus(); 
    return false; 
    } 
    return true; 
    } 
    </script> 
    </head> 
    <body> 
    <div id="box1"> 
    <form action=""> 
    <p>Type a country or a currency</p> 

    <p> <label for="txtList" > 
    <input type="text" id="txtList1" 
    placeholder="United States Dollars (USD)" list="currencies"/> 
    <datalist id="currencies"> 
    <option value="United States Dollars (USD)"> 
    <option value="Euro(EUR)"> 
    <option value="Albania (LEK)"> 
    <option value="Paunds (PAUND)"> 

    </datalist> 
    </label></input></p> 
    <nav>Browse All 
     <ul> 
     <li><a href = "#" >United States Dollars (USD)</a></li> 
     <li><a href = "#" >Euro(EUR)</a></li> 
     <li><a href = "#" >Albania (LEK)</a></li> 
     <li><a href = "#" >Paunds (PAUND)</a></li> 

</ul> 
</nav> 
<p>Please enter an amount </p> 
<p><label>Currency: 
<input name = "name" type = "text" id="first" size = "15" 
maxlength = "10"> 
</label></p></div> 
<input type="button" value="=" onclick="convert()"/> 
<div id="box2"> 
<p>Type a country or a currency</p> 

<p> <label for="txtList" > 
<input type="text" id="txtList2" 
placeholder="Euro (EUR)" list="currencies"/> 
<datalist id="currencies"> 
<option value="United States Dollars (USD)"> 
<option value="Euro(EUR)"> 
<option value="Albania (LEK)"> 
<option value="Paunds (PAUND)"> 

</datalist> 
    </label></input></p> 
    <nav>Browse All 
    <ul> 
    <li><a href = "#" >United States Dollars (USD)</a></li> 
    <li><a href = "#" >Euro(EUR)</a></li> 
    <li><a href = "#" >Albania (LEK)</a></li> 
    <li><a href = "#" >Paunds (PAUND)</a></li> 

</ul> 
</nav> 
<p>Please enter an amount </p> 
<p><label>Currency: 
<input name = "name" type = "text" id="second" size = "15" 
maxlength = "10"> 

</label></p></div></form> 
</body> 
</html> 
+1

那裏'是一個語法錯誤,如果(isNaN(f.value){'。[使用控制檯(http://webmasters.stackexchange.com/q/8525 )。[使用JSHint](http://jshint.com/)。 – Xufox

+0

我修正了這個錯誤,但是存在相同的問題 – Priscila

+0

請把這段代碼燒到20-30行代碼 – 2016-11-28 18:07:02

回答

0

我不知道你打算寫什麼邏輯。但是現在它可以用於2組值。在第一個下拉列表中選擇歐元,並在文本框中輸入一些數字。同樣,在第二個下拉列表中選擇'阿爾巴尼亞',並按'='按鈕。現在第二個文本框將具有轉換後的值。

這將開始。 :)

<html> 
 
<head> 
 
    <title>Converter </title> 
 
    <style type="text/css"> 
 
     div { 
 
      width: 600px; 
 
      height: 300px; 
 
      background-color: blue; 
 
      margin-right: 120px; 
 
      margin-top: 40px; 
 
     } 
 

 
     #box1 { 
 
      width: 200px; 
 
      height: 200px; 
 
      background-color: red; 
 
     } 
 

 
     #box2 { 
 
      width: 200px; 
 
      height: 200px; 
 
      background-color: red; 
 
     } 
 

 
     p { 
 
      font-size: 12pt; 
 
      font-family: arial, sans-serif; 
 
     } 
 

 
     nav { 
 
      font-weight: bold; 
 
      color: white; 
 
      border: 2px solid royalblue; 
 
      text-align: center; 
 
      width: 10em; 
 
      background-color: royalblue; 
 
     } 
 

 
      nav ul { 
 
       display: none; 
 
       list-style: none; 
 
       margin: 0; 
 
       padding: 0; 
 
      } 
 

 
       nav ul li { 
 
        border-top: 2px solid royalblue; 
 
        background-color: white; 
 
        width: 10em; 
 
        color: black; 
 
       } 
 

 
        nav ul li:hover { 
 
         background-color: powderblue; 
 
        } 
 

 
     a { 
 
      text-decoration: none; 
 
     } 
 
    </style> 
 
    <script type="text/javascript"> 
 
     function convert() { 
 
      if (document.getElementById('txtList1').value == 'Euro(EUR)' && document.getElementById("txtList2").value == 'Albania (LEK)') { 
 
       var eur = document.getElementById("first"); 
 
       var e = parseFloat(eur.value); 
 
       if (!validateForm()) 
 
        return; 
 
       var l = e * 135.82; 
 
       var lek = document.getElementById("second"); 
 
       lek.value = l; 
 
      } 
 
      if (document.getElementById("txtList1").value == 'Albania (LEK)' && document.getElementById("txtList2").value == 'Euro(EUR)') { 
 
       var lek = document.getElementById("first"); 
 
       var l = parseFloat(lek.value); 
 
       if (!validateForm()) 
 
        return; 
 
       var e = l * 138.92; 
 
       var eur = document.getElementById("second"); 
 
       eur.value = e; 
 
      } 
 
     } 
 
     function validateForm() { 
 
      var f = document.getElementById("first"); 
 
      if (f.value == "") { 
 
       alert("Jepni nje vlere"); 
 
       f.focus(); 
 
       return false; 
 
      } 
 
      if (isNaN(f.value)) { 
 
       alert("Vlera qe dhate nuk eshte numer"); 
 
       f.focus(); 
 
       return false; 
 
      } 
 
      return true; 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <div id="box1"> 
 
     <form action=""> 
 
      <p>Type a country or a currency</p> 
 

 
      <p> 
 
       <label for="txtList"> 
 
        <input type="text" id="txtList1" 
 
         placeholder="United States Dollars (USD)" list="currencies" /> 
 
        <datalist id="currencies"> 
 
         <option value="United States Dollars (USD)"> 
 
         <option value="Euro(EUR)"> 
 
         <option value="Albania (LEK)"> 
 
         <option value="Paunds (PAUND)"> 
 
        </datalist> 
 
       </label> 
 

 
      </p> 
 
      <nav> 
 
       Browse All 
 
      <ul> 
 
       <li><a href="#">United States Dollars (USD)</a></li> 
 
       <li><a href="#">Euro(EUR)</a></li> 
 
       <li><a href="#">Albania (LEK)</a></li> 
 
       <li><a href="#">Paunds (PAUND)</a></li> 
 

 
      </ul> 
 
      </nav> 
 
      <p>Please enter an amount </p> 
 
      <p> 
 
       <label> 
 
        Currency: 
 
       <input name="name" type="text" id="first" size="15" 
 
        maxlength="10"> 
 
       </label> 
 
      </p> 
 

 
      <input type="button" value="=" onclick="convert()" /> 
 
      <div id="box2"> 
 
       <p>Type a country or a currency</p> 
 

 
       <p> 
 
        <label for="txtList"> 
 
         <input type="text" id="txtList2" 
 
          placeholder="Euro (EUR)" list="currencies" /> 
 
         <datalist id="Datalist1"> 
 
          <option value="United States Dollars (USD)"> 
 
          <option value="Euro(EUR)"> 
 
          <option value="Albania (LEK)"> 
 
          <option value="Paunds (PAUND)"> 
 
         </datalist> 
 
        </label> 
 

 
       </p> 
 
       <nav> 
 
        Browse All 
 
       <ul> 
 
        <li><a href="#">United States Dollars (USD)</a></li> 
 
        <li><a href="#">Euro(EUR)</a></li> 
 
        <li><a href="#">Albania (LEK)</a></li> 
 
        <li><a href="#">Paunds (PAUND)</a></li> 
 

 
       </ul> 
 
       </nav> 
 
       <p>Please enter an amount </p> 
 
       <p> 
 
        <label> 
 
         Currency: 
 
        <input name="name" type="text" id="second" size="15" 
 
         maxlength="10"> 
 
        </label> 
 
       </p> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</body> 
 
</html>

+0

非常感謝。它爲這兩個工作 – Priscila