我确实有这个代码计算一些金额但是在<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>
option标签与select标签直接相连。你可以定义一个带有onChange事件处理程序的select组件,它将触发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" />
要实现选项标签,您需要将其包装在选择标签本身内,并附加一个onChange()方法,因为onClick()不能有效地工作在选择标签上。我猜你想要这个。(我的意见:你可以放弃输入字段,因为如果你使用select和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>