I have a button. The button works fine. After I have pressed the button, then it shall not be possible to press the button again. It will be best if the button looks diabled.
I have already tried with document.getElementById("id").disabled = true; but I can't make this work.
PHP code for the button. The code makes a list of buttons. Each button has id= 1, 2, 3 etc.
if($_COOKIE["sorterdb"]=='GR' || empty($_COOKIE["sorterdb"])){$dblinjer[$i]['nrlink']='<span id="para'.$i.'"></span><div class="s-12 l-12"><button type="button" id="'.$i.'" value="'.$dblinjer[$i]['loebid'].'_'.$dblinjer[$i]['tid'].'_'.$dblinjer[$i]['utcstart'].'" onclick=baadimaal("baadimaal",this)>'.$dblinjer[$i]['buttonnrsejl'].'</button></div>';}
javascript:
function baadimaal(str,el) {
var x = el.value
var id = el.getAttribute("id")
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("container"+id).innerHTML = this.responseText; //her placeres svaret, som kommer tilbage fra hide-ajax-svar filen
}
xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "¶=" + x + "&i=" + id); //overfør str og x til hide-ajax-svar filen
xhttp.send();
}
If you have a button like this:
<button class="button" id="1">Button 1</button>
<button class="button" id="2">Button 2</button>
<button class="button" id="3">Button 3</button>
You can add javascript eventlistener, do the job, than disable:
const buttons = document.querySelectorAll(".button")
buttons.forEach((item) => {
item.addEventListener("click", ()=>{
// DO SOMETHING WHITH YOUR BUTTON
console.log(`You've clicked on ${item.id} and now I'm gonna disable it.`)
// disable
item.disabled = true;
})
})
And depending on your code, maybe you should add "removeEventListener" on your button.
You can set the button's disabled property to false (see Sütemény András's answer), but that may not work in all browsers. You can also remove the listener, however that doesn't make the button look disabled.
So a belt and braces approach is to do both, e.g.
window.onload = function() {
// Listener
function clickFn() {
console.log('I\'ve been clicked! But no more…');
// Make button appear disabled
this.disabled = true;
// Remove the listener
this.removeEventListener('click', clickFn);
}
// Add the listener to the button
document.getElementById('b0').addEventListener('click', clickFn, false);
};<button id="b0">Click me</button>Note that if using setAttribute as in:
button.setAttribute('disabled', true);
the second argument is required but its value is irrelevant (it can be false, 'foo bar', 42, whatever). Regardless of the value, the element will be disabled, which is a hangover from ancient times when boolean attributes were added to HTML. Their presence alone does the job, they don't take a value (e.g. <button disabled>foo</button> creates a disabled button).
To unset the attribute (i.e. to enable the button again), use removeAttribute.