How can I keep this "onclick" from happening more than once?
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. 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.
This was working up until I added the submit button.
So this code works:
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);
};
But when I leave the HTML the same and add the submit button to the
javascript like this:
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!
No comments:
Post a Comment