Question

我有一个输入文本框，当我点击输入时，它会存储输出并以无序列表格式显示。当我使用onclick事件时，没有IIFE的功能正常工作。但是，IIFE不起作用。请帮忙。

<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>

Answer 1

您在不可见元素的点击事件上绑定事件，只需将其设为

即可

document.onkeypress = enter;

function enter(e) {
  if (e.which == 13 || e.keyCode == 13) {
    addMessage();
  }
}

<强>演示

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;

}

Message:
<input type="text" name="message" id="message">
<input type="submit" value="add" id="submitenter" style="display: none">

<ul id="list"></ul>

Answer 2

    link.addEventListener("click", function () {
        document.onkeypress = enter;
        ...

此代码存在缺陷，因为如果它有效，它会在每次单击输入框时重置document.onkeypress事件处理程序。

它也是不必要的，因为你可以设置onkeypress处理程序而不需要click事件。整件事可以这样写：

document.onkeypress = function(e) {
    if (e.which == 13 || e.keyCode == 13) {
        addMessage();
    }
}

根本不需要点击处理程序。

我想在使用IIFE输入时显示文本

2 个答案: