如何将以太坊Gas Price的输入按钮改为下拉选项实现快捷赋值

核心修改步骤 #

• 移除Gas Price区域的所有<input type="button">按钮，替换为一个<select>下拉选择框
• 给下拉框绑定change事件，选中选项时自动给gasPriceCounter输入框赋值并更新最终价格
• 保留一个默认提示选项，避免用户误触空值操作

修改后的完整代码 #

<!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 />

    <!-- 替换原按钮为下拉选择框 -->
    <select id="gasPriceShortcut" onchange="numberShortcut('gasPriceCounter', this.value)">
      <option value="">选择快捷Gas价格</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) {
        // 过滤空值，避免默认选项触发赋值
        if(value) {
          document.getElementById(id).value = value;
          updateFinalPrice();
        }
      }

      function updateFinalPrice() {
        // 处理输入为空的情况，避免计算出现NaN
        var gasPrice = parseFloat(document.getElementById("gasPriceCounter").value) || 0;
        var gasLimit = parseFloat(document.getElementById("gasLimitCounter").value) || 0;
        var gweiPrice = gasPrice * gasLimit;
        var ethPrice = gweiPrice * Math.pow(10, -9);
        var usdPrice = ethPrice * ethPriceUsd;
        document.getElementById("finalPrice").value = ethPrice.toFixed(8);
      }
    </script>
  </body>
</html>

关键修改说明 #

1. 下拉框替换按钮：用<select>包裹所有快捷数值的<option>，每个option的value对应原按钮的数值，默认选项留空防止误操作
2. 事件绑定：给下拉框添加onchange事件，直接调用原有numberShortcut函数，传入目标输入框ID和选中的value
3. 边界处理优化：在numberShortcut中判断value是否为空，避免选择默认提示选项时清空输入框；在updateFinalPrice中处理输入为空的情况，防止出现NaN错误

内容的提问来源于stack exchange，提问作者0xWenMoon