程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

如何在两个 <select> 列表之间交换选项

发布于2023-03-24 16:27     阅读(1046)     评论(0)     点赞(20)     收藏(2)


我是 Javascript 的新手,我想在单击交换按钮时交换这两个选项Page

在此处输入图像描述

HTML

<div class="form-group col-4">
    <button type="button" class="btn bg-dark text-white" id="exchange" style="margin-top: 23px; margin-left: 10px;"> 
          <i class="fa fa-exchange" aria-hidden="true"></i>
    </button>
</div>

Javascript

function swap() {
  let inp = document.getElementById("inputCurrency").value;
  let out = document.getElementById("outputCurrency").value;
  document.getElementById("inputCurrency").value = out;
  document.getElementById("outputCurrency").value = inp;
}

let amountInput = document.getElementById("amount");

let inputCurrency = document.getElementById("inputCurrency");
let outputCurrency = document.getElementById("outputCurrency");

let convertButton = document.getElementById('convertButton');
convertButton.addEventListener("click",convertCurrency);

let exchangeButton = document.getElementById("exchange");
exchangeButton.addEventListener("click",swap());

解决方案


您需要在 addEventListener 中删除函数调用,它只包含函数名称

exchangeButton.addEventListener("click",swap);

function swap() {
  let inp = document.getElementById("inputCurrency").value;
  let out = document.getElementById("outputCurrency").value;
  document.getElementById("inputCurrency").value = out;
  document.getElementById("outputCurrency").value = inp;
}

let amountInput = document.getElementById("amount");

let inputCurrency = document.getElementById("inputCurrency");
let outputCurrency = document.getElementById("outputCurrency");

let convertButton = document.getElementById('convertButton');
//convertButton.addEventListener("click",convertCurrency);

let exchangeButton = document.getElementById("exchange");
exchangeButton.addEventListener("click",swap);
<select id="inputCurrency">
<option value="1">USD</option>
<option value="2">KRW</option>
</select>
<select id="outputCurrency">
<option value="1">USD</option>
<option value="2">KRW</option>
</select>
<input type="text" id="amount"/>
<div class="form-group col-4">
    <button type="button" class="btn bg-dark text-white" id="exchange" style="margin-top: 23px; margin-left: 10px;"> Exchange
          <i class="fa fa-exchange" aria-hidden="true"></i>
    </button>
</div>
<button id="convertButton">Convert</button>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/516820/2fd3bc1abc66c2743255/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

20 0
收藏该文
已收藏

评论内容:(最多支持255个字符)