How to run this function using option tag and not input tag
Question
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
<!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 answers
solution1
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).
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" />
solution2
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. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to run a function by clicking an option in a drop down select tag?
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?
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?
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 input tag function + select tag function?
How to call a validation function on input tag
Related Tags