HTML and Javascript - ReferenceError: document is not defined

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 and I'm being able to save the data as csv files as well (not shown in the code), but I keep getting the error:

let symbol = document.getElementById("symbol").value;
             ^

ReferenceError: document is not defined
    at file:///c:/Users/Rafael%20Oliveira/Desktop/teste/tempCodeRunnerFile.js:5:14
    at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
    at async Loader.import (internal/modules/esm/loader.js:177:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

This is the 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 src="yahooAPI.js"></script>
    <title>Document</title>

</head>
<body>
    <div class="symbol"> 
        <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').value,document.getElementById('period1').value,document.getElementById('period2').value,document.getElementById('interval').value)"></input>
    </div>

    <div class="table">
        <table style="width:50%">
            <tr>
              <th>Date</th>
              <th>Open</th>
              <th>High</th>
              <th>Low</th>
              <th>Close</th>
              <th>AdjClose</th>
              <th>Volume</th>
              <th>Symbol</th>
              
            </tr>
          </table>
    </div>
    <script src="yahooAPI.js"></script>
</body>
</html>

Javascript:

import ObjectsToCsv from 'objects-to-csv';
import yahooFinance from 'yahoo-finance2';

let symbol = document.getElementById("symbol").value;
let period1 = document.getElementById("period1").value;
let period2 = document.getElementById("period2").value;
let interval = document.getElementById("interval").value;

async function api(symbol, period1, period2, interval){
  const query = symbol;
  const queryOptions = { period1: period1, period2: period2, interval: interval };
  let result = await yahooFinance.historical(query, queryOptions);
  const resultWithSymbol = result.map((item) => ({ ...item, symbol: query }));

  console.log(resultWithSymbol);
api();

How could I possibly retrieve the user input data and pass it onto the api function in javascript? My main goal is to put the output in the table class, but I'd first like to figure out how I could have access to the data in my HTML file

Thank you in advance, any help is very welcome as I'm a begginner in both HTML and JavaScript (Trying to have a learn by doing approach)

Quentin · Answer 1 · 2021-08-12T16:32:46.613

Your error message shows that you are trying to run the JS file with Node.js. This doesn't work because Node.js has no native concept of a document.

You need to load the JS into the HTML document with a <script type="module"> element, and then run it by loading the HTML document using a web browser (pointing to an HTTP server, you can't import modules from file scheme URLs).

You'll also need to change your imports to reference the URL to the JS modules you want to import. You can't use Node module resolution in the browser.

Alternatively, use a bundler to package all your modules into a single non-module script that you can load into the <script> element.

This assumes that yahoo-finance2 can run in the browser in the first place. It might depend on Node.js specific APIs or try to access a service which doesn't grant permission for browsers to access it cross-origin.

If either of those is the case then you'll need to write server side code instead of using a client side script.

HTML and Javascript - ReferenceError: document is not defined

1 Answers1