如何使用選項標簽而不是輸入標簽運行此功能
[英]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.