I have 3 different files that are crucial for my webpage to function properly:
index.html:
<html>
<head>
</head>
<body>
<h1>Webpage</h1>
<p id = "text">Hello world!</p>
<button onclick = "myButton()">Click me!</button>
<script src="./page.js"></script>
</body>
</html>
server.js:
const express = require('express');
const app = express()
const port = 8000
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, () => {
console.log('Server started.')
});
and page.js:
function myButton() {
document.getElementById('text').innerHTML = 'Hi world!';
}
Even though the button functions perfectly fine when the HTML file is opened manually from a file explorer, I am encountering an issue. When server.js is running and I visit localhost, suddenly the button stops working. Can someone provide insight into what might be going wrong here?