Javascript 根據輸入變量重復單擊按鈕

Question

我試圖使按鈕單擊（發送）發生的次數是用戶填寫輸入表單的數量（多少）。 我的問題是點擊沒有發生。 出了什么問題，沒有錯誤日志。 日志說點擊輸入變量的時間。但按鈕點擊只發生一次。 輸入采用點擊后提交的形式。

所以簡而言之，我的問題是：我需要 javascript（或其他解決方案）來提交我的按鈕，其 ID 為“發送”乘以用戶填寫的 ID 為“多少”。 因此，當用戶輸入 10 時，按鈕應該只提交 10 次，然后停止，直到用戶再次按下按鈕。

<tr><td class="footer">Hire for (hours): </td><td class="footer"><input type="number" value="1"  onClick="this.select()" name="findtime" size="20"></td></tr>
<tr><td class="footer">How many times: </td><td class="footer"><input type="number" value="1"  onClick="this.select()" id="howmany" name="howmany" size="20"></td></tr>
<tr><td class="footer"></td><td class="footer"><input class="example_c" type="submit" id="send" name="send" onclick="myFunction()" value="Hire private detective"></td></tr>

<script language="javascript">
 function myFunction() {
  const timesToClick = document.getElementById("howmany").value;
  for (let i = 0; i < timesToClick; ++i) {
    document.getElementById("send").click();
    console.log('clicked');
  }  
}
</script>

Answer 1

您的提交按鈕有一個 onclick function 是 myFunction。 所以當你點擊發送按鈕時，myFunction function 被觸發，再次點擊發送按鈕。 所以 function 運行了兩次。 您可以設置一個用於觸發的變量，如下所示。

 var isTriggered = false; function myFunction() { console.log('clicked'); if (.isTriggered) { const timesToClick = document.getElementById("howmany");value; isTriggered = true; for (let i = 0; i < timesToClick. i++) { document.getElementById("send");click(); } isTriggered = false; } }

 <tr><td class="footer">Hire for (hours): </td><td class="footer"><input type="number" value="1" onClick="this.select()" name="findtime" size="20"></td></tr> <tr><td class="footer">How many times: </td><td class="footer"><input type="number" value="1" onClick="this.select()" id="howmany" name="howmany" size="20"></td></tr> <tr><td class="footer"></td><td class="footer"><input class="example_c" type="submit" id="send" name="send" onclick="myFunction()" value="Hire private detective"></td></tr>

Answer 2

您可以使用 setTimeOut 進行迭代

請運行代碼片段，點擊“開始”查看效果

 function realclick(){ console.log('clicked'); document.getElementById("send").click(); } function myFunction() { if (document.getElementById("howmanyleft").value =="") { document.getElementById("howmanyleft").value=document.getElementById("howmany").value; } if (document.getElementById("howmanyleft").value > 0) { setTimeout(function(){ realclick(); }, 200); document.getElementById("howmanyleft").value=(document.getElementById("howmanyleft").value *1) -1; } else { document.getElementById("howmanyleft").value =""; } }

 <table> <tr><td class="footer">Hire for (hours): </td><td class="footer"> <input type="number" value="1" onClick="this.select()" name="findtime" size="20"></td></tr> <tr><td class="footer">How many times: </td><td class="footer"> <input type="number" value="5" onClick="this.select()" id="howmany" name="howmany" size="20"></td></tr> <tr><td> <input value="" id="howmanyleft" id="howmanyleft" size="20" readonly type=hidden></td></tr> <tr><td class="footer"></td> <td class="footer"> <input class="example_c" type="submit" id="send" name="send" onclick="myFunction()" value="Start"></td></tr> </table>