My input text box is supposed to store and display the output in an unordered list format when I hit enter. The function works fine without IIFE using onclick event, but it's not working with IIFE. Can anyone assist me with this issue?
<html>
<head>
<title>messagewithenter</title>
</head>
<body>
Message:
<input type="text" name="message" id="message">
<input type="submit" value="add" id="submitenter" style="display: none">
<ul id="list"></ul>
<script>
(function () {
var link = document.getElementById("submitenter");
link.addEventListener("click", function () {
document.onkeypress = enter;
function enter(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
});
function addMessage() {
var message = document.getElementById("message").value;
var output = "<li>" + message + "<li" + "<br>";
document.getElementById("list").innerHTML += output;
}
}());
</script>
</body>
</html>