如何使用选项标签而不是输入标签来运行这个函数

我确实有这个代码计算一些金额但是在<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>

相关内容

最新更新

热门标签：