如何使用选项标签而不是输入标签运行此功能
[英]How to run this function using option tag and not input tag
问题描述
i do have this code which calculate some amounts but on <h2>Gas Price:</h2> selection there are <input type="button" onclick="numberShortcut('gasPriceCounter', 1)" value="1" /> inputs but i need them to be options like <option onclick="numberShortcut('gasPriceCounter', 1)" value="1"></option> but by all means i need to change the input to option how can i do it
我确实有这段代码可以计算一些金额，但是在<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
The option tag is directly connected to the select tag.选项标签直接连接到选择标签。 You can define a select component with an onChange event handler which will trigger the numberShortcut() function with specific parameters based on selected values (optional also updateFinalPrice() if you want to get rid of all inputs).您可以使用 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
To implement option tag you need to wrap it inside the select tag itself and attach an onChange() method to it as onClick() don't work effectively on select tag.要实现选项标签，您需要将其包装在选择标签本身内并附加一个 onChange() 方法，因为 onClick() 在选择标签上不起作用。 I'm assuming you want this.我假设你想要这个。 (My Opinion: you can ditch the input field as it is no longer required if you are using select and 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 /> <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何通过单击下拉选择标签中的选项来运行功能？ - How to run a function by clicking an option in a drop down select tag?
如何使用 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
使用过滤器功能匹配选项标签的文本 - matching text of option tag using filter function
如何将功能应用于选项选择标签？ - How to apply a function to option selected tag?
如何获得在功能参数中选择的选项标签？ - How to get the option tag selected in the function parameters?
选择选项标签后，如何导航到另一个页面，然后自动运行jQuery函数？ - When an option tag is selected, how do you navigate to another page and then run a jQuery function automatically?
将点击输入更改为选项标签 - changing input on click to option tag
HTML输入标签功能+选择标签功能？ - HTML input tag function + select tag function?
如何在输入标签上调用验证功能 - How to call a validation function on input tag
相关标签