Change Button from dynamic PHP site with javascript

Question

I try to change a button text after click for a few seconds. On the page are buttons dynamically build by a PHP database while loop. Every button gets an id dynamically like button0, button1, button2 etc.....

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

And here the Javascript Code:

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

The Button name passes through the function after click. But the programm never reached after if(!clicked){ ... It seems, that it not recognizing a "click" or something. But I dont know what to do.

Greetings

You can check event in DevTools on Elements -> Event Listeners. If event here - some trouble in function — Pavlo Mezhevikin
– Pavlo Mezhevikin, Commented Dec 28, 2021 at 11:37
Thanks for your answer. It shows nothing. But I noticed that it works only if I click a button a second time. I doesn't work at the first click. — An Dré
– An Dré, Commented Dec 28, 2021 at 11:45
i`m not strong in JS, but what load first? script or html? maybe on script load first time he dont see buttons? — Pavlo Mezhevikin
– Pavlo Mezhevikin, Commented Dec 28, 2021 at 11:48

Professor Abronsius · Accepted Answer · 2021-12-28 12:08:06Z

2

You could try something like this. Assign the event listener to the hyperlink and use this within the event handler to find the button and modify it's properties

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>

answered Dec 28, 2021 at 12:08

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shahamar Rahman Himel · Accepted Answer · 2021-12-28 12:01:21Z

1

Here is your working solution

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

replace this with selector on setTimeout method

answered Dec 28, 2021 at 12:01

Shahamar Rahman Himel

234 bronze badges

Comments

iamalinski · Accepted Answer · 2021-12-28 12:07:47Z

1

I would take a different approach. For example you can add a class to those buttons - class="my-button" and simply loop them. You can then add the logic for each button by adding a event listener

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

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

You also might want to include an async attribute on your script tag. That way you can be sure that the HTML doesn't load after the script.

<script async ...>

edited Dec 28, 2021 at 12:07

answered Dec 28, 2021 at 11:44

iamalinski

3741 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Change Button from dynamic PHP site with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related