Hey @darknessgamingdk!
So, the first thing I’d like to debug with you is why require
isn’t working for you. I think I had the exact same problem earlier this week, and I think I solved it! I tested it by remixing your project, commenting out all the Airtable code, and then creating a new file called test.js
right next to server.js
. In server.js
I put const test = require('./test.js');
at the top. In test.js
I wrote module.exports = "hello world!";
.
Then in server.js
, under app.get("/"....
I wrote console.log(test);
(so it looked like this, when finished:)
// http://expressjs.com/en/starter/basic-routing.html
app.get("/", function(request, response) {
console.log(test);
response.sendFile(__dirname + '/views/index.html');
});
And when I viewed the site, in the logs below, I could see “hello world!” getting logged out, like this:
If
require
still doesn’t work after matching this code, let me know, and we can try to identify which part might be the sticking point.
So, the reason why you can’t find the submitData()
function in your html file is because it’s located on the server. The “public” files are the ones that get sent to someone’s browser when they try to view your site – the server files are the one that remain running wherever your website is hosted. So when the requesting browser runs your index.html
file and tries to look up the submitData()
function, it’s trying to look up a function that only exists back on your server. (Also, I know some of this may be overly simple or obvious to you, I just want to make sure I cover all bases ). So either you need to move that function into the “public” (or “client”) code, or you need to send a message to the server to run that code.
In my original message, I suggested that you create a new route on the server side, which would wait for you to send a request from the clientside. To clarify what I mean by this, you’ll see that there is already an app.get("/"...
route set up in the code. This means, “when a user goes to the url for this website, please send them this response.” The response is the website itself.
Looking at the submitData()
function which you wrote, however, it looks more like client-side code! This function is clearly trying to reach out and grab data directly off the form that you built in the index.html
file. It might be simpler (than the way I suggested) to just drop this into your client.js
file, in the public
directory, and attach it to the button from inside the JS file.
You’ll notice that you import client.js
at the bottom of the file – this can be a good practice, since that file wants to do things which require the page to be constructed already. The snag is that, even if submitData()
were defined in client.js
, you would be trying to reference it on the button
element before it had been read by the browser. One way to handle that (and perform the above part of attaching the function to the button) is as follows –
First, give the button an ID so that it’s easy grab via javascript: <button id="submitDataButton">Submit</button>
.
Then, grab a reference to the button in your client.js
file as follows:
const myButton = document.getElementById("submitDataButton");
Now you have a reference to the button, so you can work with it!
Next, you want to define that function in your client.js
folder. This should be as easy as copying and pasting that code into client.js
– if you have an original reference you were working off of, that might have some more clues (and feel free to share it with me, I can take a look)
Having defined the function, you can attach it to your button. It might look something like this (obviously with the functionality of your submitData
call vastly simplified.)
function submitData(){
console.log("Hello World!");
}
const myButton = document.getElementById("submitDataButton").addEventListener("click", function(){
submitData();
}
My only other suggestions are that you probably want to move the
// var base = new Airtable({apiKey: process.env.AIRTABLE_API_KEY}).base(process.env.AIRTABLE_BASE_ID);
calls to the top of the client.js
file so that they aren’t called every time the function is called.
I think this should get you closer to your goal! Let me know if any of this could be clearer, or if it doesn’t answer the question.