Question

我希望ID为#show-text-area的按钮仅执行一次postButton();函数，这样它在单击时就不会创建第二个元素（我希望它仅创建一次并且不会。” t再次工作，直到单击另一个按钮）。希望我的问题很清楚。

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

Answer 1

您可以在激活后禁用该按钮，这样做的好处是可以通知用户进一步的点击将无济于事。

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

否则，如果该函数已被调用，则只需使其短路即可。

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

Answer 2

以下作品。

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>

Answer 3

如果不想创建文本隐藏区域，还可以在文本区域上使用隐藏显示功能。

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>

如何使按钮单击仅执行一次代码

3 个答案: