クリックすると、メッセージを入力するための領域が開くボタンを作成しようとしています。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());
};
再び重複し始めます。これが起こらないようにする方法はありますか?
ご協力いただきありがとうございます!