When I hit the submit button, I'm unable to achieve the, "Enjoy your day" on the enti-CodePudding

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Checklist</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
  <script src="script.js"></script>
</head>

<body>

  <h1>Checklist</h1>
  <form onsubmit="return isChecked()">
    <div >
      <input type="checkbox" id="workout" name="todo1" value="workout">workout</input>
    </div>
    <div >
      <input type="checkbox" id="meeting" name="todo2" value="meeting">meeting</input>
    </div>
    <div >
      <input type="checkbox" id="lunch" name="todo3" value="lunch">lunch</input>
    </div>
    <div >
      <input type="checkbox" id="school" name="todo4" value="school">class</input>
    </div>
    <div>
      <input  id="submit" type="submit" value="Submit"
        onchange="document.getElementById('formName').submit()">
    </div>
    <!--<p id="msg"></p> (I tried using this approach and calling the msg within script but I received an error.)-->
  </form>
  </div>
</body>


<script>
  function isChecked() {
    var workout = document.getElementById('workout').checked;
    var meeting = document.getElementById('meeting').checked;
    var lunch = document.getElementById('lunch').checked;
    var school = document.getElementById('school').checked;
    var submit = document.getElementById('submit');
    var text = document.getElementById('msg');

//My if/else statement alert works perfectly. However, with the presence of const submit, it doesn't work properly (I think it's interfering with my if/else statement). Removing the const submit section allows one to experience the if/else alert statement. The goal of this checklist is to be able to check one or all four checkboxes and have it return the "Enjoy your day" text. However, I would like for that message to cover the screen and be the only thing visible after hitting the submit button. I'm okay with receiving an alert box when it returns false. However, when it returns true, I would like for the message to cover the screen and for the checklist/checkboxes to disappear. I'm not sure where I'm getting my wires crossed.

    if (workout == false && meeting == false && lunch == false && school == false) {
      alert('Please check a box');
      return false;
    } else {
      return true;
    }
    const submit = document.getElementById("submit");
    submit.addEventListener("click", function (e) {
      document.body.innerHTML = "<h1>Enjoy your day.</h1>";
    });
  }
</script>

</html>

enter image description here

CodePudding user response：

You are declaring submit twice in the isChecked function. Omit one of the declaration.

Also, you are adding the event listener to the submit button after the return statement, which JS will ignore and won't append any onclick function.

The updated isChecked function should be

function isChecked() {
    var workout = document.getElementById('workout').checked;
    var meeting = document.getElementById('meeting').checked;
    var lunch = document.getElementById('lunch').checked;
    var school = document.getElementById('school').checked;
    // Removed the submit variable
    var text = document.getElementById('msg');
    if (workout == false && meeting == false && lunch == false && school == false) {
        alert('Please check a box');
        return false;
    }
    const submit = document.getElementById("submit");
    submit.addEventListener("click", function (e) {
        document.body.innerHTML = "<h1>Enjoy your day.</h1>";
    });
    // Returning true after adding the event listener.
    return true;
}

CodePudding user response：

Just display the message since it is being called onsubmit

function isChecked() {
  var workout = document.getElementById('workout').checked;
  var meeting = document.getElementById('meeting').checked;
  var lunch = document.getElementById('lunch').checked;
  var school = document.getElementById('school').checked;

  if (!workout && !meeting && !lunch && !school) {
    alert('Please check a box');
  } else {
    document.body.innerHTML = "<h1>Enjoy your day.</h1>";
  }

  return false;

}

<h1>Checklist</h1>
<form onsubmit="return isChecked()">
  <div >
    <input type="checkbox" id="workout" name="todo1" value="workout">workout</input>
  </div>
  <div >
    <input type="checkbox" id="meeting" name="todo2" value="meeting">meeting</input>
  </div>
  <div >
    <input type="checkbox" id="lunch" name="todo3" value="lunch">lunch</input>
  </div>
  <div >
    <input type="checkbox" id="school" name="todo4" value="school">class</input>
  </div>
  <div>
    <input  id="submit" type="submit" value="Submit">
  </div>
</form>
</div>