HTML: Can't enable button by onclick - html

Question

I want load a disabled button by default but change it to enable on click the button. Here is how I did it.
<button id="Btn" class="navBtn" disabled onclick="enableBtn()">click to enable</button>
function enableBtn() {
document.getElementById("Btn").disabled = false;
}
But it is not working....
I've tried to load an enabled button by default and click to disabled, but the reverse is not working...
I'm using HTML and JavaScript

Answer 1

You are trying to click on a disabled button. The button is disabled, so it can't be clicked.
Why are you trying to make it so that you have to click to activate it in the first place? Maybe there is a better solution to the problem as a whole?
Edit: The actual purpose of the button is to toggle a boolean, this can be done fairly easily like this.
var enableFeature = false;
function toggleFeature(){
enableFeature = !enableFeature;
(put code setting the feature's status to enableFeature here)
}
https://www.w3schools.com/js/js_booleans.asp

Answer 2

You can use this code -
//html
<button id="Btn" class="navBtn" onclick="enableBtn()">click to enable</button>
//js
function enableBtn() {
document.getElementById("Btn").setAttribute("disabled", "false")
}

Answer 3

A disabled button cannot trigger the click method, you should better add a CSS class which makes the button look like disabled.
Here is an example:
<style>
button.inactive {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
</style>
<button id="Btn" class="navBtn" onclick="toggleBtn()">click to enable</button>
<script>
var buttonEnabled = true;
function toggleBtn() {
if（buttonEnabled){
document.getElementById("Btn").className = "navBtn inactive"
} else {
document.getElementById("Btn").className = "navBtn";
}
buttonEnabled = !buttonEnabled;
}
</script>

Answer 4

You can solve it by adding a wrapper around it that listens to a click event to enable the underlying button.
<div id="btnWrapper" onclick="enableBtn()">
<button id="Btn" class="navBtn" disabled>click to enable</button>
</div>
However, this approach requires a CSS addition: pointer-events which is well supported on desktop browsers. Here is the CSS I added to your button:
#Btn {
pointer-events:none;
}
This allows you to enable your button when clicking on it.
Life example:
function enableBtn() {
console.log('button enabled');
document.getElementById("Btn").disabled = false;
}
#Btn {
pointer-events:none;
}
<div id="btnWrapper" onclick="enableBtn()">
<button id="Btn" class="navBtn" disabled>click to enable</button>
</div>