How to run this function using option tag and not input tag-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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>