Getting user input in HTML and then passing it into a JavaScript function

Question

I'm trying to create a user input where the user can choose a stock Symbol, a Start Date, End Date and Interval. I would then like for this information to be passed along the javascript function api to retrieve information about that specific stock such as open, high, low, close, etc. The javascript function is working when I call the api function, but I'm not sure if I'm using the right code on HTML to use the user input and then passing this input onto the api() function on javascript once the user presses the "Execute" button

Javascript:

import yahooFinance from 'yahoo-finance2';

let symbolNew = document.getElementById("symbol").value;
let periodStart = document.getElementById("period1").value;
let periodEnd = document.getElementById("period2").value;
let intervalNew = document.getElementById("interval").value;

async function api(symbol, start, end, val) {
  const query = String(symbol);
  const queryOptions = { period1: new Date(start), period2: new Date(end), interval: String(val) };
  let result = await yahooFinance.historical(query, queryOptions);
  let resultWithSymbol = result.map((item) => ({ ...item, symbol: query })); //... is called the spread operator - it concatonates things

  console.log(resultWithSymbol);
  return resultWithSymbol;
};
  api(symbolNew, periodStart, periodEnd, intervalNew);

HTML:

<!DOCTYPE html><p>API</p>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="../dist/bundle.js"></script>
    <title>Document</title>

</head>
<body>
    <div class="symbol"> 
        <p id="symbol"></p>
        <label for="name">Symbol (4 characters):</label>
        <input type="text" id="symbol" name="symbol" required
       minlength="4" maxlength="4" size="10" placeholder="Exemplo: TSLA">

    </div>

    <div class="interval"> 
        <label for="name">Interval: (1d, 1wk or 1mo):</label>
        <input type="text" id="interval" name="interval" required
       minlength="2" maxlength="3" size="10" placeholder="Exemplo: 1d">

    </div>

    <div class="period1"> 
        <label for="name">Start Date:</label>
        <input type="text" id="period1" name="period1" required
       minlength="10" maxlength="10" size="20" placeholder="Exemplo: 2021-08-20">

    </div>

    <div class="period2"> 
        <label for="name">End Date:</label>
        <input type="text" id="period2" name="period2" required
       minlength="10" maxlength="10" size="20" placeholder="Exemplo: 2021-08-25">
        

    </div>

    <div class="button">
        <input type="button" name="buttonExecute" value="Execute" onclick="api(document.getElementById('symbol'),document.getElementById('period1'),document.getElementById('period2'),document.getElementById('interval'))"></input>
    </div>

</body>
</html>

I'm aware that Node js doesn't recogniz "document." so I'll be using Webpack or Bable to get the input of the api() function onto the HTML

Thank you in advance

You shouldn't call api() in the top-level code, since that runs before the user clicks on anything. — Barmar
– Barmar, Commented Aug 18, 2021 at 22:05

wazz · Accepted Answer · 2021-08-19 05:56:56Z

1

'value' (document.getElementById('symbol').value;) is missing in the HTML onclick event.

answered Aug 19, 2021 at 5:56

wazz

5,0885 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting user input in HTML and then passing it into a JavaScript function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related