Trying to disable button if text hasn’t being input and one of three check box hasn’t been checked i-CodePudding

I am trying to disable a button that requires both an input of text being typed and one of three checkboxes being checked. The text is a user name and the checkbox is a difficulty of either easy, medium, or hard. Currently, my function only works if one of the requirements is met. So if the text has been inputted the button is enabled and the same with the checkboxes.

startButton.addEventListener('click', startQuiz);

function disableButton() {
  if (document.getElementById("username").value === "") {
    document.getElementById("start-btn").disabled = true;
  }

  if (document.getElementsByName("difficulty").checked) {
    document.getElementById("start-btn").disabled = true;
  }
  else {
    document.getElementById("start-btn").disabled = false;
  }
}

 

<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="disableButton()" placeholder="Enter Username">
</div>
<div id="difficulty" >
  <div>
    <input type="radio" name="difficulty" id="easy-diff" onclick="disableButton()">
    <label for="easy-diff">Easy</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="medium-diff" onclick="disableButton()">
    <label for="medium-diff">Medium</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="hard-diff" onclick="disableButton()">
    <label for="hard-diff">Hard</label>
  </div>
</div>

<button id="start-btn" type="submit"   disabled>Start</button>

CodePudding user response：

every time the value changed, check both input

let diffChecked = false;
let startButton = document.querySelector('#start-btn');
let username = document.querySelector('#username');
let difficulty = document.querySelectorAll('[name="difficulty"]');

username.addEventListener('input', function() {
  validateInput();
})

difficulty.forEach(function(item) {
  item.addEventListener('click', function() {
    diffChecked = true;
    validateInput();
  })
})

function validateInput() {
  if (username.value && diffChecked) {
    startButton.disabled = false;
  } else {
    startButton.disabled = true
  }
}

<div>
  <label for="username">Enter your Username</label>
  <input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div id="difficulty" >
  <div>
    <input type="radio" name="difficulty" id="easy-diff">
    <label for="easy-diff">Easy</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="medium-diff">
    <label for="medium-diff">Medium</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="hard-diff">
    <label for="hard-diff">Hard</label>
  </div>
</div>

<button id="start-btn" type="submit"  disabled>Start</button>

CodePudding user response：

Instead of a div you must use the Semantic HTML form, that will do the job for you without even writing javascript code.

<form id="difficulty" >
  <div>
    <input type="radio" name="difficulty" id="easy-diff" required>
    <label for="easy-diff">Easy</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="medium-diff" required>
    <label for="medium-diff">Medium</label>
  </div>
  <div>
    <input type="radio" name="difficulty" id="hard-diff" required>
    <label for="hard-diff">Hard</label>
  </div>
  <button type="submit">Enviar</button>
</form>

Inside a form tag, the submit button only works with all required inputs does not have an undefined value.

And you may call your function startQuiz as an action, if you want. The action attribute specifies where to send the form-data when a form is submitted.

<form id="difficulty"  action="startQuiz()">