如何使用选项标签而不是输入标签运行此功能
[英]How to run this function using option tag and not input tag
问题描述
我确实有这段代码可以计算一些金额，但是在<h2>Gas Price:</h2>选择中有<input type="button" onclick="numberShortcut('gasPriceCounter', 1)" value="1" />输入，但我需要它们是像<option onclick="numberShortcut('gasPriceCounter', 1)" value="1"></option>这样的选项，但无论如何我需要将输入更改为选项我该怎么做
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="icon" href="ethicon.png" /> <title>Ethereum Gas Calculator</title> </head> <body> <script src="https://caiovivas.github.io/ethereum-gas-calculator/jq.js" type="text/javascript"></script> <h1>Ethereum Gas Calculator</h1> <h2>Gas Limit:</h2> <input type="number" id="gasLimitCounter" onkeypress="updateFinalPrice()" /><br /> <input type="button" onclick="numberShortcut('gasLimitCounter', 21000)" value="21000" /> <input type="button" onclick="numberShortcut('gasLimitCounter', 200000)" value="200000" /> <h2>Gas Price:</h2> <input type="number" id="gasPriceCounter" onkeypress="updateFinalPrice()" /><br /> <input type="button" onclick="numberShortcut('gasPriceCounter', 1)" value="1" /> <input type="button" onclick="numberShortcut('gasPriceCounter', 5)" value="5" /> <input type="button" onclick="numberShortcut('gasPriceCounter', 30)" value="30" /> <input type="button" onclick="numberShortcut('gasPriceCounter', 50)" value="50" /> <input type="button" onclick="numberShortcut('gasPriceCounter', 60)" value="60" /> <h2>Final Cost:</h2> <input id="finalPrice" /> <script> var ethPriceBtc = 0; var ethPriceUsd = 0; window.onload = $(function () { updateFinalPrice(); function getValues() { $.getJSON("https://api.coinmarketcap.com/v1/ticker/ethereum/", function (data) { ethPriceBtc = data[0].price_btc; ethPriceUsd = data[0].price_usd; }); $.getJSON("https://api.fixer.io/latest?base=USD", function (data) {}); updateFinalPrice(); setTimeout(getValues, 15000); } getValues(); }); function numberShortcut(id, value) { document.getElementById(id).value = value; updateFinalPrice(); } function updateFinalPrice() { var gweiPrice = document.getElementById("gasPriceCounter").value * document.getElementById("gasLimitCounter").value; var ethPrice = gweiPrice * Math.pow(10, -9); var usdPrice = ethPrice * ethPriceUsd; document.getElementById("finalPrice").value = ethPrice.toFixed(8); } </script> </body> </html>
2 个解决方案
解决方案1
0 2022-07-19 10:31:22
选项标签直接连接到选择标签。 您可以使用 onChange 事件处理程序定义选择组件，该处理程序将根据所选值触发带有特定参数的numberShortcut()函数（如果您想摆脱所有输入，则可选updateFinalPrice() ）。
var ethPriceBtc = 0; var ethPriceUsd = 0; window.onload = $(function() { updateFinalPrice(); function getValues() { $.getJSON("https://api.coinmarketcap.com/v1/ticker/ethereum/", function(data) { ethPriceBtc = data[0].price_btc; ethPriceUsd = data[0].price_usd; }); $.getJSON("https://api.fixer.io/latest?base=USD", function(data) {}); updateFinalPrice(); setTimeout(getValues, 15000); } getValues(); }); function numberShortcut(id, value) { document.getElementById(id).value = value; updateFinalPrice(); } function updateFinalPrice() { var gweiPrice = document.getElementById("gasPriceCounter").value * document.getElementById("gasLimitCounter").value; var ethPrice = gweiPrice * Math.pow(10, -9); var usdPrice = ethPrice * ethPriceUsd; document.getElementById("finalPrice").value = ethPrice.toFixed(8); } function changeGasLimit(e) { if (!isNaN(e.value)) { numberShortcut('gasLimitCounter', e.value); //check if you selected a number updateFinalPrice() } } function changeGasPrice(e) { if (!isNaN(e.value)) { numberShortcut('gasPriceCounter', e.value) //check if you selected a number updateFinalPrice() } }
<script src="https://caiovivas.github.io/ethereum-gas-calculator/jq.js" type="text/javascript"></script> <h1>Ethereum Gas Calculator</h1> <h2>Gas Limit:</h2> <select id="gasLimitCounter" onchange="changeGasLimit(this)"> <option selected value="21000">21000</option> <option value="200000">200000</option> </select> <h2>Gas Price:</h2> <select id="gasPriceCounter" onchange="changeGasPrice(this)"> <option selected value="1">1</option> <option value="5">5</option> <option value="30">30</option> <option value="50">50</option> <option value="60">60</option> </select> <h2>Final Cost:</h2> <input id="finalPrice" />
解决方案2
0 2022-07-19 10:37:15
要实现选项标签，您需要将其包装在选择标签本身内并附加一个 onChange() 方法，因为 onClick() 在选择标签上不起作用。 我假设你想要这个。 （我的意见：您可以放弃输入字段，因为如果您使用选择和选项，则不再需要它。）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="icon" href="ethicon.png" /> <title>Ethereum Gas Calculator</title> </head> <body> <script src="https://caiovivas.github.io/ethereum-gas-calculator/jq.js" type="text/javascript"></script> <h1>Ethereum Gas Calculator</h1> <h2>Gas Limit:</h2> <input type="number" id="gasLimitCounter" onkeypress="updateFinalPrice()" /><br /> <select onChange="numberShortcut('gasLimitCounter', value)"> <option value=0>0</option> <option value=21000>21000</option> <option value=200000>200000</option> </select> <h2>Gas Price:</h2> <input type="number" id="gasPriceCounter" onkeypress="updateFinalPrice()" /><br /> <select onChange="numberShortcut('gasPriceCounter', value), updateFinalPrice()"> <option value=>0</option> <option value=1>1</option> <option value=5>5</option> <option value=30>30</option> <option value=50>50</option> <option value=60>60</option> </select> <h2>Final Cost:</h2> <input id="finalPrice" /> <script> var ethPriceBtc = 0; var ethPriceUsd = 0; window.onload = $(function () { updateFinalPrice(); function getValues() { $.getJSON("https://api.coinmarketcap.com/v1/ticker/ethereum/", function (data) { ethPriceBtc = data[0].price_btc; ethPriceUsd = data[0].price_usd; }); $.getJSON("https://api.fixer.io/latest?base=USD", function (data) {}); updateFinalPrice(); setTimeout(getValues, 15000); } getValues(); }); function numberShortcut(id, value) { document.getElementById(id).value = value; updateFinalPrice(); } function updateFinalPrice() { var gweiPrice = document.getElementById("gasPriceCounter").value * document.getElementById("gasLimitCounter").value; var ethPrice = gweiPrice * Math.pow(10, -9); var usdPrice = ethPrice * ethPriceUsd; document.getElementById("finalPrice").value = ethPrice.toFixed(8); } </script> </body> </html>
如何使用 JavaScript\\JQuery 使用选择标记的选定选项的值设置隐藏输入标记的值？
[英]How can I set the value of an hidden input tag with the value of the selected option of a select tag using JavaScript\JQuery?
在输入标签中按下逗号后如何在 select 标签中显示选项
[英]how to display option in select tag after comma is pressed in input tag
选择选项标签后，如何导航到另一个页面，然后自动运行jQuery函数？
[英]When an option tag is selected, how do you navigate to another page and then run a jQuery function automatically?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.