how to make the button click executes code only one time

Question

I want the button with the id #show-text-area execute the postButton(); function only once so it won't create a second elements whenever clicked (i want it to create it for only one time and won't work again until clicked another button). Hope my question was clear enough.

HTML

 <div id="post-creator" class="creator-container">
    <div class="post-type">
        <div class="text-post" id="post">
            <button onclick="postButton();">Post</button>
        </div>
        <div class="media-post">Image & Video</div>
        <div class="link-post">Link</div>
    </div>
    <div class="post-title">
        <input type="text" class="title-text" name="post-title" placeholder="Title">
    </div>
    <div class="post-content">

    </div>
    <div class="post-footer">
        <div class="spoiler">Spoiler</div>
        <div class="nsfw">NSFW</div>
        <button class="post">post</button>
    </div>
</div>

Javascript

let postButton = function() {
     let textarea = document.createElement('textarea');
    textarea.setAttribute('class', 'post-data');
    textarea.setAttribute('placeholder', 'Text (optional)');
    document.querySelector('.post-content').appendChild(textarea);
}

Possible duplicate of [Function in JavaScript that can be called only once](https://stackoverflow.com/questions/12713564/function-in-javascript-that-can-be-called-only-once) — King11, Nov 21 '19 at 18:28

CollinD · Answer 1 · 2019-11-21T18:31:45.317

You could disable the button after activation, this has the benefit of informing the user that further clicks won't do anything.

let postButton = function() {
     let textarea = document.createElement('textarea');
    textarea.setAttribute('class', 'post-data');
    textarea.setAttribute('placeholder', 'Text (optional)');
    document.querySelector('.post-content').appendChild(textarea);
    document.getElementsByTagName("button")[0].disabled = true;
}

Otherwise you could simply have the function short-circuit if it has already been called.

// alreadyPosted is scoped outside of the function so it will retain its value
// across calls to postButton()
let alreadyPosted = false;
let postButton = function() {
    // do nothing if this isn't the first call
    if (alreadyPosted) { return; }
    // mark the function as called
    alreadyPosted = true;
    let textarea = document.createElement('textarea');
    textarea.setAttribute('class', 'post-data');
    textarea.setAttribute('placeholder', 'Text (optional)');
    document.querySelector('.post-content').appendChild(textarea);
    document.getElementsByTagName("button")[0].disabled = true;
}

i thought about that too but i wanted to ask to see if there is another way, so im gonna disable it anyways, thanks — Salah Eddine Makdour, Nov 21 '19 at 18:31

score 1 · Answer 2 · answered Nov 21 '19 at 18:31

The following works.

let postButton = function(event) {
  event.target.disabled = true;
  let textarea = document.createElement('textarea');
  textarea.setAttribute('class', 'post-data');
  textarea.setAttribute('placeholder', 'Text (optional)');
  document.querySelector('.post-content').appendChild(textarea);
};

document.getElementById('post').addEventListener('click', postButton);

<div id="post-creator" class="creator-container">
  <div class="post-type">
    <div class="text-post" id="post">
      <button>Post</button>
    </div>
    <div class="media-post">Image & Video</div>
    <div class="link-post">Link</div>
  </div>
  <div class="post-title">
    <input type="text" class="title-text" name="post-title" placeholder="Title">
  </div>
  <div class="post-content">

  </div>
  <div class="post-footer">
    <div class="spoiler">Spoiler</div>
    <div class="nsfw">NSFW</div>
    <button class="post">post</button>
  </div>
</div>

score 0 · Answer 3 · answered Nov 22 '19 at 06:40

You can also use hide show function on textarea if you do not want to create one.

let postButton = function() {
    let d = document.getElementById('post_data').style.display;
    if(d=='none'){
      document.getElementById('post_data').style.display = 'block';
    }
}
document.getElementById('post_data').style.display = 'none';
document.getElementById('post_btn').addEventListener('click', postButton);

<div id="post-creator" class="creator-container">
  <div class="post-type">
    <div class="text-post">
      <button id="post_btn">Post</button>
    </div>
    <div class="media-post">Image &amp; Video</div>
    <div class="link-post">Link</div>
  </div>
  <div class="post-title">
    <input type="text" class="title-text" name="post-title" placeholder="Title">
  </div>
  <div class="post-content">
   <textarea class="post-data" id="post_data" placeholder="Text (optional)"></textarea>   
   </div>
  <div class="post-footer">
    <div class="spoiler">Spoiler</div>
    <div class="nsfw">NSFW</div>
    <button class="post">post</button>
  </div>
</div>

how to make the button click executes code only one time

3 Answers3