Sending data from html.index to functions.js file

JavaScript
1

Hello there,

Currently, I am stuck on working with a .html file which needs to send over data to a javascript file with functions. It looks as follows:

Data

let data = [
    ["ID1", "URL1"],
    ["ID2", "URL2"],
    ["ID3", "URL3"],
]

HTML part calling javascript functions file with 

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>Metabase Dashboard Carousel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="./src/carousel.js"></script>
  </head>
  <body onLoad="createFrames('test!')">
    <button class="btn btn-primary " onclick=autoRun()>Start</button>
    <button class="btn btn-primary " onclick=pause()>Pause</button>
  </body>
</html>

Function which is called

function createFrames(text) {
    console.log(text);
    let data = prepareFrameSources();
    for(var i in data)        
        prepareFrame(data[i][0], data[i][1]);
};

Calling the function does give me a print of test! on the .html console with Mozilla inspector. However, running the rest of the script or actually using the data variable as input in the body onLoad function does not work.

  1. How does this come and what would be a fix?

  2. Also, not directly related what is a good way to load files between related .js / .yml / .json as when running the code in .html gives back that require is not defined?

Thanks for the help!

2

Where is data defined? In your carousel.js?

Does your body tag look like this?

<body onLoad="createFrames(data)">

For the require is not defined problem, sounds like you may be running some back-end/Node code such as…

require('some-module')

which doesn’t really work on the browser because it has no knowledge of require. You may want to consider using ES6 modules.