Binding click event to a input element
Question
I am trying to serve html files from server without using template engines . Please find the below script for starting the server.
// 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;
};
Following is my html file:
<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>
I tried the following without any success:
I included the
click()inline in the button element, and the function was declared in script tag in the same html file. This did not work.I included the fromScript function in
script.jsfile and served that file as static content. This did not work as expected.
Then I used addEventListener to bind the click event to input element. Now whenever I click the button, "Button Clicked" message is printed twice.
What is the correct/best practice for binding dom events to the elements?
Edit
Thanks for the answer Thijs Kramer . But the problem is due to the function name.
If I name the function as click it is not working. But if I rename it to fromScript it is working.
Should we not use "click" for function name?
3 answers
solution1
1 2018-11-09 19:12:17
Your problem has nothing to do with express :) The best practice for binding click events is for example the following:
<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>
</head>
<body>
<p>Home Page</p>
<input type="button" value="Click Me" id="btn">
<script>
const button = document.getElementById("btn");
button.addEventListener("click", () => {
console.log("Button Clicked");
});
</script>
</body>
</html>
Edit : I think I know what you mean:
If you rename the function fromScript to click , you obviously have to change the value of the onclick attribute as well:
<input type="button" onclick="click()" />
solution2
0 2018-11-09 14:21:38
The below code should work fine:
// script.js
const express = require("express");
// const bodyParser = require("body-parser");
const app = express();
app.use(express.static(__dirname));
app.listen(3103, () => console.log("hi"));
then node script.js and try to access it by going to http://localhost:3103/temp.html ?
solution3
0 ACCPTED 2018-11-10 09:45:17
The reason for your naming problem is that the HTMLElement API (which all html elements inherit from) has a click property. It is a function meant to be used to programmatically trigger a click event on the element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
To avoid confusion and unpredictable behaviour, always make sure to name your variables and functions unambigously with regard to inherited and built-in properties from the prototype chain.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.