0

我想要一个按钮，当点击它时，会打开一个区域来输入消息。我在 HTML 中使用“onclick”，我希望它只能点击一次。我不希望它继续制作更多的文本区域，因为你点击它的次数越多。

在调用该函数的onclick之后，我有一个this.onclick="null" 。这一直在工作，直到我添加了提交按钮。

所以这段代码有效：

HTML：

<html>
<head>
    <script type="text/javascript" src="js/question.js"></script>
    <style type="text/css">
        #container {
            position: absolute;
            height: 443px;
            width: 743px;
            border: 1px solid black;
            border-radius: 0 0 20px 0;
            margin-top: 75px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <button id="new_message" onclick="createMessage(), this.onclick=null;">New Message</button>
</body>
</html>

Javascript：

function createMessage() {
    var form = document.createElement("form");
    form.name = "form_input";
    form.method = "POST";
    form.action = "messages.php";
    container.appendChild(form);

    var textarea = document.createElement("textarea");
    textarea.name = "message_input";
    textarea.cols = 84; 
    textarea.rows = 16; 
    textarea.id = "message_input"; 
    container.appendChild(textarea);
};

但是当我保持 HTML 不变并将提交按钮添加到 javascript 时，如下所示：

function createMessage() {
    var form = document.createElement("form");
    form.name = "form_input";
    form.method = "POST";
    form.action = "messages.php";
    container.appendChild(form);

    var textarea = document.createElement("textarea");
    textarea.name = "message_input";
    textarea.cols = 84; 
    textarea.rows = 16; 
    textarea.id = "message_input"; 
    container.appendChild(textarea);

    var submit = document.createElement("button");
    submit.innerHTML = 'Send';
    submit.id = 'send_message';
    container.appendChild(submit); 
    submit.onClick(messageAjax());
};

它再次开始复制。有什么办法可以防止这种情况发生吗？

谢谢你的帮助！

4

2 回答 2

0

那是因为您的代码包含错误：

submit.onClick(messageAjax());

属性是onclick, 小写。onClick不存在并引发错误。这可以防止按钮自己onclick被清除，因为错误会导致脚本停止。

我不完全确定上面的行应该是什么。它似乎在调用 messageAjax，然后立即将该函数的参数传递给submit.onClick... 你是不是这个意思？

submit.onclick = messageAjax;
于 2013-09-07T23:58:39.200 回答
0

也许 ：

(function() {

    var open = false;

    function createMessage() {

        if( open ) return;

        var form = document.createElement("form");
        form.name = "form_input";
        form.method = "POST";
        form.action = "messages.php";
        container.appendChild(form);

        var textarea = document.createElement("textarea");
        textarea.name = "message_input";
        textarea.cols = 84; 
        textarea.rows = 16; 
        textarea.id = "message_input"; 
        container.appendChild(textarea);

        var submit = document.createElement("button");
        submit.innerHTML = 'Send';
        submit.id = 'send_message';
        container.appendChild(submit); 
        submit.onClick(messageAjax());

        open = true;
    };

})();

闭包避免了与 window.open() 的名称冲突。你可以用不同的名字来命名它，但它只是让你知道它。

于 2013-09-07T23:59:30.213 回答