Asking the user to re-enter year of birth until birth year

I have a problem that how to keep show a prompt until user enter their birth year is always smaller than the current year. Here is my code I try using loop but now i struggle. I hope someone can help me, I appreciate it.

<body>
<p id= "age"></p>
<button onclick=" notify()">Try it</button>
<script>
function notify(){
let age = prompt("Your birth year");
        const year = new Date().getFullYear();
        do {
          document.getElementById("age").innerHTML =
            age   " is a good year";
        } while (age < year && age != null);
}
</script>
</body>

CodePudding user response：

You could use recursion:

<body>
  <p id="age"></p>
  <button onclick="notify()">Try it</button>
  <script>
    age_p = document.getElementById("age");
    function notify() {
      let age = prompt("Your birth yeat");
      const year = new Date().getFullYear();
      if (parseInt(age) < year) {
        age_p.innerHTML = age   " is a good year";
      } else {
        notify();
      }
    }
  </script>
  </body>

CodePudding user response：

Two things to check:

the test for "if age greater or equal to current year continue looping" appear to be around the wrong way. Try >= instead of < as the age/year comparison operator.
Make sure to call prompt again if the year entered is unacceptable.

Show the snippet to see a working version:

function notify(){
        let age;
        const year = new Date().getFullYear();
        do {
          age = prompt("Your birth year");
        } while (age >= year && age != null);
        document.getElementById("age").innerHTML =
            age   " is a good year";
}

<p id= "age"></p>
<button onclick=" notify()">Try it</button>

CodePudding user response：

This suggested solution reworks your code considerably to try to improve both UX and maintainability.

A prompt modal dialog is easy for us to set up but tends to be clunky for the user. (An input element, in this case a numeric one, is usually the best way to get user input.)
Inline event handlers violate SoC while being less flexible than proper event listeners.

(There are stylistic changes here, too, but these are just personal preference and can be safely ignored.)

(See the in-code comments for further clarifications.)

// Gets current year, and identifies some DOM elements
const
  year = new Date().getFullYear(),
  yearInput = document.getElementById("year-input"),
  outputParagraph = document.getElementById("output-paragraph"),
  submitButton = document.getElementById("submit-button");

// Calls notify whenever button is clicked
submitButton.addEventListener("click", notify);

// Alternative listener setup you could try -- makes button unnecessary
// yearInput.addEventListener("change", notify);



// Chooses and shows message (by comparing inputted year to current year)
function notify(){

  const userYear = yearInput.value;
  let message;

  if(userYear === "")     { message = ""; }
  else if(userYear > year){ message = "Greetings, time traveller"; }
  else                    { message = "You are fit for your age"; }

  outputParagraph.textContent = message;
}

input{ width: 8ch; }

<label>
    Your birth year
    <input id="year-input" type="number" />
</label>
<button id="submit-button">SUBMIT</button>
<p id="output-paragraph"></p>