Я пытаюсь обслуживать html-файлы с сервера без использования шаблонизаторов . Пожалуйста, найдите ниже скрипт для запуска сервера.
// script.js
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.static(__dirname));
app.get("/", (req, res) => {
res.set("Content-Type", "text/html");
const f = require("./templates")();
console.log(f);
res.send(f);
});
app.listen(3103, () => console.log("hi"));
// template.js
const fs = require("fs");
const html = fs.readFileSync(__dirname + "/temp.html", "utf8");
module.exports = (variables) => {
return html;
};
Ниже приведен мой HTML-файл:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./script.js"></script> <!-- The click function was served in a different file -->
</head>
<body>
<p>Home Page</p>
<input type="button" value="Click Me" id="btn" onclick="click()">
<script>
console.log("hi");
function click(){ console.log("_Button clicked"); }
//document.getElementById("btn").addEventListener("click", () => {
//console.log("Button Clicked");
//});
</script>
</body>
</html>
Я попробовал следующее безуспешно:
Я включил click() inline в элемент button, и функция была объявлена в теге script в том же html-файле. Это не сработало.
Я включил функцию fromScript в файл script.js и использовал этот файл в качестве статического содержимого. Это не сработало, как ожидалось.
Затем я использовал addEventListener, чтобы связать событие click с элементом ввода. Теперь, когда я нажимаю кнопку, сообщение «Нажатие кнопки» печатается дважды.
Как правильно / лучше всего связывать события dom с элементами?
Редактировать
Спасибо за ответ Тийс Крамер . Но проблема связана с именем функции.
Если я назову функцию , нажмите , она не работает. Но если я переименую его в fromScript , он будет работать.
Разве мы не должны использовать «щелчок» для имени функции?