how to hide html button when disabled-CodePudding

GOOD MORNING, I'm editing on this code... someone can solve this: how to hide the button when it is disabled?

function Selected() {
  return document.querySelectorAll('input[type=radio]:checked').length;
}

function onChange() {
  console.log(Selected());
  document.getElementById('scoreButton').disabled = Selected() < 1;
}

document.querySelectorAll('input[type=radio]').forEach(node => {
  node.addEventListener('change', onChange, false);
});

<div >
<dl id="1">
    <dd><b>TEXT.</b><br>
      <label><input type="radio" name="q1" value="1a"> 1. </label><br>
      <label><input type="radio" name="q1" value="1b"> 2. </label><br>
      <label><input type="radio" name="q1" value="1c"> 3. </label>
    <hr></dd>
 </dl>

<div><input type="button" value="BUTTON" disabled="" id="scoreButton"></div>
</div>

CodePudding user response：

Using simple CSS:

button[disabled] { display: none; }

CodePudding user response：

function Selected() {
  return document.querySelectorAll('input[type=radio]:checked').length;
  
}

function onChange() {
  console.log(Selected());
  document.getElementById('scoreButton').disabled = Selected() < 1;
 
}

document.querySelectorAll('input[type=radio]').forEach(node => {
  node.addEventListener('change', onChange, false);
  
});

:disabled {
  display:none;
}

<div >
<dl id="1">
    <dd><b>1. text.</b><br>
      <label><input type="radio" name="q1" value="1a"> 1. </label><br>
      <label><input type="radio" name="q1" value="1b"> 2. </label><br>
      <label><input type="radio" name="q1" value="1c"> 3. </label>
    <hr></dd>
  


<div><input type="button" value="BUTTON" disabled="" id="scoreButton"></div>
</div>