使用 javascript 从动态 PHP 站点更改按钮答案

【问题标题】：Change Button from dynamic PHP site with javascript使用 javascript 从动态 PHP 站点更改按钮
【发布时间】：2021-12-28 11:26:15
【问题描述】：

单击几秒钟后，我尝试更改按钮文本。页面上是由 PHP 数据库 while 循环动态构建的按钮。每个按钮都会动态获取一个 id，例如 button0、button1、button2 等.....

echo "<a href='rdp://" . $record["ip_adress"] . "'><button id='button".$counter."' type='button' class='button' onclick=\"btn('button".$counter."')\" style='vertical-align:middle'"?>
<?php if($freeusers == 0){echo "disabled>No Login";}else{echo ">Login";}?> <?php echo "</button></a>";

这里是 Javascript 代码：

<script>
    function btn(i){
    document.getElementById(i).addEventListener('click', function (clicked) {
    
    return function () {
        if (!clicked) {
            var last = this.innerHTML;
            this.innerHTML = 'please wait...';
            clicked = true;
            setTimeout(function () {
                this.innerHTML = last;
                clicked = false;
            }.bind(this), 5000);
        }
    };
}(false), this);
    }

</script>

按钮名称在点击后通过函数。但是在 if(!clicked){ ... 看来，它没有识别“点击”或其他东西。但我不知道该怎么办。

问候

【问题讨论】：

您可以在 DevTools 中的 Elements -> Event Listeners 中查看事件。如果在这里发生事件 - 功能出现问题
感谢您的回答。它什么也没显示。但我注意到它只有在我第二次单击按钮时才有效。第一次点击我不工作。
我不擅长 JS，但先加载什么？脚本还是html？也许在他第一次看不到按钮时加载脚本？

标签： javascript php html css

【解决方案1】：

你可以试试这样的。将事件侦听器分配给超链接并在事件处理程序中使用this 查找button 并修改其属性

document.querySelectorAll('a[href^="rdp:"]').forEach(a => {
  bttn = a.firstElementChild;
  bttn.dataset.alt = 'Please wait...';
  bttn.dataset.value = bttn.innerHTML;


  a.addEventListener('click', function(e) {
    let bttn = this.firstElementChild
    bttn.innerHTML = bttn.dataset.alt;

    setTimeout(() => {
      bttn.innerHTML = bttn.dataset.value;
    }, 5000)
  });
});

<a href="rdp:192.168.0.4" target="_blank">
  <button type="button" class="button">Login</button>
</a>
<a href="rdp:192.168.0.57" target="_blank">
  <button type="button" class="button">Login</button>
</a>

【讨论】：

【解决方案2】：

这是您的工作解决方案

document.getElementById('i').addEventListener('click', function () {
    var btnText = this.innerText;
    this.innerText = 'Please Wait...';
    setTimeout(function () {
        document.getElementById('i').innerText = btnText;
    }, 1000);
})

用 setTimeout 方法上的选择器替换它

【讨论】：

【解决方案3】：

我会采取不同的方法。例如，您可以为这些按钮添加一个类 - class="my-button" 并简单地循环它们。然后，您可以通过添加事件侦听器来为每个按钮添加逻辑

const myButtons = document.querySelectorAll('.my-button')

for (let i=0; i <= myButtons.length; i++) { 
  myButtons[i].addEventListener('click', e => {
    ...
  })
}

您可能还希望在脚本标记中包含异步属性。这样您就可以确保 HTML 不会在脚本之后加载。

<script async ...>

【讨论】：