javascript - 如何在单击 JavaScript 函数中的按钮时添加文本“请稍等...”

Question

我已经使用 JavaScript 创建了一些函数调用，并使其延迟 7 秒，现在我希望当用户单击按钮时，延迟时间开始后立即出现“请稍候...”文本（不在按钮文本中）。

“请稍候”文本应显示为标题标签（h3 或 h4 标签）

任何帮助/建议，请...

function yes() {
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  console.log("clicked on Test-Button");
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};

<label>
    Your Name: 
    <input id="name" />
</label>
<br />
<button onclick="setTimeout(yes, 7000)">Test</button> <!-- timeout -->
<p id="test"></p>

标签： javascripthtmljqueryonclick

Answer 1

最好通过 javascript （而不是 inline onclick）附加 eventListeners - 在这种情况下，它为我们提供了一个很好的机会来执行 Please Wait... 插入 - 当完成的输出到达时，它会被覆盖（最好）。

window.addEventListener('load', ()  => {
  document.querySelector('button.test-btn').addEventListener('click', e => {
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';
    setTimeout(yes, 7000)
  })
})

function yes() {
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};

<label>
    Your Name: 
    <input id="name" />
</label>
<br />
<button class='test-btn'>Test</button>
<p id="test"></p>