javascript中的交换程序_Javascript_Html_Css

javascript中的交换程序

javascript html css

javascript中的交换程序,javascript,html,css,Javascript,Html,Css,我正在尝试用javascript结合HTML和CSS代码编写一个exchange转换器。我在这里遇到的问题是，我无法将数字从一种货币转换为另一种货币，而有两个不同的框，一个用于输入值，另一个用于返回交换值。我的程序根本不转换任何东西。如果你能帮忙，我将不胜感激。下面是我的全部代码： <html> <head> <title> Converter </title> <style type="text/c

我正在尝试用javascript结合HTML和CSS代码编写一个exchange转换器。我在这里遇到的问题是，我无法将数字从一种货币转换为另一种货币，而有两个不同的框，一个用于输入值，另一个用于返回交换值。我的程序根本不转换任何东西。如果你能帮忙，我将不胜感激。下面是我的全部代码：

     <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>

我不确定你打算写什么。但现在它将适用于2组值。在第一个下拉列表中选择Euro并在文本框中输入一些数字。同样，在第二个下拉列表中选择“阿尔巴尼亚”，然后按“=”按钮。现在，第二个文本框将具有转换后的值

这将开始

转换器 div{ 宽度：600px；高度：300px；背景颜色：蓝色；右边距：120px；边缘顶端：40px； } 框1{ 宽度：200px；高度：200px；背景色：红色； } 框2{ 宽度：200px；高度：200px；背景色：红色； } p{ 字号：12号；字体系列：arial，无衬线； } 导航{ 字体大小：粗体；颜色：白色；边框：2件纯蓝；文本对齐：居中；宽度：10em；背景颜色：皇家蓝； } 导航ul{ 显示：无；列表样式：无；保证金：0；填充：0； } 李国荣{ 边框顶部：2件纯蓝；背景色：白色；宽度：10em；颜色：黑色； } nav ul li:悬停{ 背景色：粉蓝色； } a{ 文字装饰：无； } 函数转换{ 如果document.getElementById'txtList1'.value='EuroEUR'&&document.getElementByIdtxtList2.value=='albana LEK'{ var eur=document.getElementByIdfirst； var e=parseflogur.value；如果！验证窗体回来 var l=e*135.82； var lek=document.getElementByIdsecond； lek.value=l； } 如果document.getElementByIdtxtList1.value=='albana LEK'&&document.getElementByIdtxtList2.value=='EuroEUR'{ var lek=document.getElementByIdfirst； var l=parseFloatlek.value；如果！验证窗体回来 var e=l*138.92； var eur=document.getElementByIdsecond；欧元价值=e； } } 函数validateForm{ var f=document.getElementByIdfirst；如果f.value=={ alertJepni nje vlere； f、重点；返回false； } 如果是Nanf.value{ alertVlera qe dhate nuk eshte Num； f、重点；返回false； } 返回true； } 键入国家或货币

浏览全部请输入金额

货币：

键入国家或货币

浏览全部请输入金额

货币：

ifisNaNf.value{…出现语法错误，我修复了此错误，但也存在相同的问题。请将此问题归结为20-30行代码。好的。我将在消息下方编写简短的代码。我很高兴您的问题得到解决。为了将来的参考，我将向您解释得到否决票的原因是，您的问题没有表现出任何演示效果：您只是复制了整个代码，而没有创建一个脚本或解释关键功能。如今，这里的人们希望在适用的地方这样做，通常，这也能帮助你自己发现问题。始终将代码减少到出现问题所需的绝对最小值—98%的几率您会发现这只是一个小错误。请求帮助应该是最后的手段。