如何防止这种“ onclick”发生多次？

Question

I am trying to have a button, that when clicked, opens up an area to type a message. 我正在尝试一个按钮，单击该按钮会打开一个区域以键入消息。 I am using "onclick" in the HTML and I want it to be only clickable once. 我在HTML中使用“ onclick”，并且希望它只能单击一次。 I don't want it to keep making more textarea's the more you click it. 我不希望它随着点击次数的增加而使文本区域更多。

I have a this.onclick="null" after the onclick that calls the function. 在调用函数的onclick之后，我有一个this.onclick =“ null” 。 This was working up until I added the submit button. 直到我添加了“提交”按钮，此过程一直在进行。

So this code works: 因此，此代码有效：

HTML: 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: 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);
};

But when I leave the HTML the same and add the submit button to the javascript like this: 但是，当我将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());
};

It starts to duplicate again. 它再次开始复制。 Is there any way to keep this from happining? 有什么办法可以防止这种情况发生吗？

Thanks for your help! 谢谢你的帮助！

Answer 1

That's because your code contains an error: 那是因为您的代码包含错误：

submit.onClick(messageAjax());

The property is onclick , in lowercase. 该属性为小写的onclick 。 onClick does not exist and throws an error. onClick不存在，并引发错误。 This prevents the button from having its own onclick cleared, since the error causes the script to stop. 由于该错误导致脚本停止，因此可以防止清除按钮本身的onclick 。

I'm not entirely sure what the line above is supposed to be. 我不完全确定上面的行应该是什么。 It appears to be calling messageAjax , and then immediately passing that function's argument to submit.onClick ... Did you maybe mean this? 它似乎正在调用 messageAjax ，然后立即将该函数的参数传递给submit.onClick ...您可能是这个意思吗？

submit.onclick = messageAjax;

Answer 2

Maybe : 也许：

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

})();

The closure avoids name conflict with window.open(). 闭包避免了与window.open（）的名称冲突。 You could name it differently, but it's just so you know it. 您可以使用不同的名称，但这只是为了您知道它。

如何防止这种“ onclick”发生多次？

问题描述

2 个解决方案

解决方案1
0 2013-09-07 23:58:39

解决方案2
0 2013-09-07 23:59:30

如何防止这种“ onclick”发生多次？

问题描述

2 个解决方案

解决方案1 0 2013-09-07 23:58:39

解决方案2 0 2013-09-07 23:59:30

解决方案1
0 2013-09-07 23:58:39

解决方案2
0 2013-09-07 23:59:30