JavaScript：关闭正确值的模态

Question

Good Day,

I am currently nearly done creating a Modal with Vanilla JS, at present, my "Age Gate" does check if the age of the user is less than 18 and displays a error of 'Invalid Credentials',

I have tried to go further by trying to close the modal on the correct value and then the modal to close,

Please see my code below for the JS:

const modal = document.getElementById("myModal");
const form = document.querySelector('form');
const loading = document.getElementById("loading");
const btnSubmit = document.getElementById('btnSubmit');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

// Functions

function onlyNumbers(e) {
  const ageGate = document.querySelectorAll('.ageGate');
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  const errMsgDiv = document.getElementById('errorMsg');

  let containsNumber = false
  ageGate.forEach(input => {
    if(numbers.some(num => input.value.includes(num))) containsNumber = true;
  })
  if (containsNumber || ageGate.value !== numbers && ageGate.value == '' || ageGate[2].value < 2004) {
    let paragraph = document.createElement('p');
    paragraph.innerHTML = 'Invalid Credentials';
    errMsgDiv.append(paragraph);
    e.preventDefault()
    }  else if (containsNumber = true) {
        btnSubmit.remove()
        loading.classList.remove('hide')
    }
    
};

and now the Modal html:

<div id="modal">
            <div class="modal-content">
                <div class="flex-container">
                    <div>
                        <img
                            src="{% static 'imgs/Fireball_logo.png' %}"
                            class="logo"
                            alt="fireball logo"
                        />
                        <h1>WOAH THERE!</h1>
                        <p class="info-text">We just need to see something</p>
                    </div>
                    <form action="">
                        {% csrf_token %}
                        <div class="form-flex">
                            <input
                                class="ageGate"
                                type="text"
                                max-length="2"
                                placeholder="DD"
                            />
                            <input
                                class="ageGate"
                                type="text"
                                max-length="2"
                                placeholder="MM"
                            />
                            <input
                                class="ageGate"
                                type="text"
                                max-length="4"
                                placeholder="YYYY"
                            />
                        </div>
                        <p class="cookie-policy">
                            <small>
                                This site uses cookies. Cookie Policy. I agree
                                to the terms of use, and the privacy policy.
                                This information will not be used for marketing
                                purposes
                            </small>
                        </p>
                        <div class="text-center">
                            <button id="btnSubmit" class="btn" type="submit">
                                <p class="btn-text">Enter</p>
                            </button>
                            <img 
                                src="{% static 'imgs/spinner.gif' %}"
                                alt="spinner" 
                                id="loading" 
                                class="loading close">
                        </div>
                        <span id="errorMsg"></span>
                    </form>
                    <div>
                        <img
                            src="{% static 'imgs/Drinkaware_logo.png' %}"
                            alt="Drinkaware Logo"
                        />
                    </div>
                </div>
            </div>
        </div>

Please as usual, I am sort of new with it all and I am definitely trying, so in your help, please could I ask for a brief explanation on your solution so that I may see how to think as a dev as that kind of information does help me

Thanks!

Answer 1

function onlyNumbers(e) {
  e.preventDefault()
  const ageGate = document.querySelectorAll('.ageGate');
  const errMsgDiv = document.getElementById('errorMsg');

  const year = ageGate[2].value;
  const month = ageGate[1].value;
  const day = ageGate[0].value;
  const userBirthday = new Date(year, month - 1, day);

  // Date Right Now
  const today = new Date();
  // Users age in years
  const acceptingYear = today.getFullYear() - userBirthday.getFullYear()

  if (acceptingYear < 18 || 
      acceptingYear == 18 &&
      today.getMonth() < userBirthday.getMonth() ||
      today.getMonth() == userBirthday.getMonth() &&
      today.getDate() < userBirthday.getDate()
      ) {
      let paragraph = document.createElement('p');
      paragraph.innerHTML = 'Invalid Credentials';
      errMsgDiv.append(paragraph);
  } else {
    btnSubmit.remove()
    loading.classList.remove('hide')
    modal.classList.add('close');
    }
    
};

I needed to target the modal and make sure that it was closing on execution of my function