Question

我正在设计一个货币转换器应用程序，并且正在获取世界上的货币并将它们即时添加到标签中。我有两个下拉菜单，一个下拉菜单用于货币转换，第二个下拉菜单用于货币转换。我已经可以使用“ FROM”部分了，但是“ TO”部分给我带来了很多麻烦。这是下面的代码：

 
 $(document).ready(function() {
 
 let optFrom = document.getElementById('from');
  let optTo = document.getElementById('to');
  
  const url = 'https://free.currencyconverterapi.com/api/v5/countries';
  
  

  
 fetch(url, {
        method:'GET',
        mode:'cors',
        redirect: 'follow',
        headers : new Headers({
          'Content-Type':'application/json',
          'Accept':'application/json, text/plain'
        })
   }).then(response => {
    if (response.status !== 200){
        console.log("There seems to be a problem");
        return;
      }
   //const cacheRes = response.json();
    return response.json();
  })
 .then(results => {
   let cacheRes = results;
   for (const result in cacheRes){
        for (const sm in cacheRes[result]){
          optFrom.innerHTML+= `<option value='${cacheRes[result][sm]["name"]}'>${cacheRes[result][sm]["currencyId"]}</option>`
         
        }
      }
   let smart = results;
   for (const resu in smart){
        for (const sm in smart[resu]){
          optTo.innerHTML+= `<option value='${smart[resu][sm]["name"]}'>${smart[resu][sm]["currencyId"]}</option>`
         
        }
      }
   
   
   
 })
 .catch(err => console.log("something went wrong"));
 
 
 });

.container-fluid{
  background: rgba(0,0,0,0.5);
}
.row#eins{
  margin: 65px auto;
}

.row#zwei{
  margin: 65px auto;
}

h4{
  margin-left:239px;
  color: #eeeeee;
}

.ht{
  height: auto;
  text-align: center;
}

.ms{
  height: 100px;
  border: 1px solid white;
}

#fro > p{
  margin-top:35px;
}

input[type="number"]{
  height: 70px;
  margin-top: 17px;
  /*border:none;*/
  font-size:18px;
  text-align: center;
  margin-left: -7px;
  
}

#to, #too{
  background:white;
}

#convert{
  text-align:center;
}

<div class="container-fluid">
  <!--main starts-->
  <div class="row" id="main">
    <!--row one-->
    <div class="row" id="eins">
      <h4>From</h4>
      <div class="col-sm-3 ht"></div>
      <div class="col-sm-3 ht ms" id="fro1">
        <select id="from"  onchange="convertCurrency">
          <option value="...">...</option>
        </select>
      </div>
      <div class="col-sm-3 ht ms" id="to">
        <input type="number" id="number1" name="value1">
      </div>
      <div class="col-sm-3 ht"></div>
    </div><!--row one ends-->
    
    <!--row two-->
    <div class="row" id="zwei">
      <h4>To</h4>
      <div class="col-sm-3 ht"></div>
      <div class="col-sm-3 ht ms" id="fro2">
        <select id="to"  onchange="convertCurrency">
          <option value="...">...</option>
        </select>
      </div>
      <div class="col-sm-3 ht ms" id="too">
        <input type="number" id="number2" name="value2">
      </div>
      <div class="col-sm-3 ht"></div>
    </div><!--row two ends-->
    
    </div><br><!--main ends-->
  <div id="convert">
    <button type="button" class="btn btn-lg">Convert</button>
  </div><br><br>
  </div><br><br>
</div>

Answer 1

您有两次ID为“ to”的元素。因此，它将始终选择div并将其全部添加：

Directory

更改div的ID或Select的ID。它将起作用。如果更改“选择”，则还需要更改选择器：

例如，您可以更改为：

<div class="col-sm-3 ht ms" id="to">
    <input type="number" id="number1" name="value1">
</div>

干杯

Answer 2

重复的ID“到”

更改

  <div class="col-sm-3 ht ms" id="to">
    <input type="number" id="number1" name="value1">
  </div>

到

  <div class="col-sm-3 ht ms" id="to1">
    <input type="number" id="number1" name="value1">
  </div>

第二个下拉菜单运行不正常。

2 个答案: