Adding Warning When Button Is Disabled

I have this code: I am trying to add a warning message when document.querySelector('#printpage').disabled the printpage button is disabled to tell the user to check the required f

Solution 1:

You've got plenty of code here. It's always better to provide a minimal solution. I tried to build a minimal solution for you.

I's CSS only, the Javascript is only for clarification on how it works.

var buttons = document.querySelectorAll(".btn");

document.getElementById("toggle-disabled").addEventListener("click", function(e){
  for(let i = 0; i < buttons.length; i++){
    buttons[i].toggleAttribute("disabled");
  }
});

.btn-disabled-warning {
  display: none;
}

.btn[disabled] + .btn-disabled-warning {
  color: red;
  display: block;
}

<div><buttonclass="btn"disabled>My Button</button><pclass="btn-disabled-warning">The button is disabled :-(</p><div><div><buttonclass="btn">My Button</button><pclass="btn-disabled-warning">The button is disabled :-(</p><div><buttonid="toggle-disabled">Toggle disabled</button>