I have a project where I am utilizing webpack and ES6 classes. In this particular scenario, I am attempting to trigger the 'onblur' function on input#password but unfortunately, it is not working as expected. Strangely, there are no errors thrown, and the callback function is also not being called. When I try to inspect the input#password element outside of the event listener using console.log(document.getElementById('password')), it correctly shows the input#password as a DOM object. I am lost and unsure of what mistake I might be making here. Below you can find the code snippets for reference:
index.html
<head>
<script src="./bundle.js"></script>
</head>
<body>
<input id="password" type="password" placeholder="Please enter your password" autofocus="autofocus">
</body>
webpack-config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'dist')
}
};
index.js
import { Password } from './app/main';
document.getElementById('password').addEventListener('onblur', () => {
console.log('I'm stuck at this point');
var initPwd = new Password();
initPwd.init();
})
main.js
class Password {
init() {
console.log('I am inside init.')
}
}
export { Password }
Your assistance would be greatly appreciated!