How can I submit date (e.g. a year) so I can use it to make computations in Javascript.

**Task at hand: determine if a year is a leap year. ** My idea was to try to have a user enter a year (four digits only), then send that info to javascript, so it can be used in my isLeapYear function. My function works only if I neglect the info provided by the user and only use console.log with different years. Any guidance is truly appreciate. Trying to learn to code, but I get overwhelmed and discouraged, so I stop (any guidance on this as well? How do you keep motivated?)

<!--HTML-->
<!DOCTYPE html>
<html lang = "en">
   <head>
     <title> Is it leapyear </title>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="leapyear.js"></script>
   </head>
   <body>
     <p> Enter year </p>
     <input type="numbers" id="leapYear" placeholder="enter a 4 digit year-YYYY" maxlength="4" pattern="\d{4}"/>
     <button type="submit">Submit</button>
   </body>
</html>

//JAVASCRIPT
var year = document.getElementById("leapYear").value;

function isLeapYear(year) {
    if ( ( year % 4 == 0 && year % 100 != 0 ) || (year % 400 == 0) ) { 
        console.log(`${year} is a leap year`); 
    } else {
        console.log(`${year} is not a leap year`); 
    }
}

//console.log(isLeapYear(2023));

CodePudding user response：

your code logic is correct. you need to typecast the year into number

year = Number(year)

There are number of ways to convert a string into a number to refer this

CodePudding user response：

Let's create a listener for the input event and check the entered data

document.getElementById('leapYear').addEventListener('input', (e) => {
    const year = e.target.value;
    if ( ( year % 4 === 0 && year % 100 !== 0 ) || (year % 400 === 0) ) {
      console.log(`${year} is a leap year`);
    } else {
      console.log(`${year} is not a leap year`);
    }
  })

<input type="number" id="leapYear" placeholder="enter a 4 digit year-YYYY" maxlength="4" pattern="\d{4}" />
<button type="submit">Submit</button>

CodePudding user response：

The way you're current code is set up is so that it will be executed on page load, what you actually want is to execute the javascript part only when you are clicking the button, this is possible by using the onClick property on the button element and changing the javascript a tiny bit so the value of the field is only retrieved within the isLeapYear function.

Working code (The javascript could also be in the file you already have, just wanted it to test easily) :

<!--HTML-->
<!DOCTYPE html>
<html lang = "en">
<head>
    <title> Is it leapyear </title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript">
        function isLeapYear(year) {
            var year = document.getElementById("leapYear").value;

            if ( ( year % 4 == 0 && year % 100 != 0 ) || (year % 400 == 0) ) {
                console.log(`${year} is a leap year`);
            } else {
                console.log(`${year} is not a leap year`);
            }
        }
    </script>
</head>
<body>
    <p> Enter year </p>
    <input type="number" id="leapYear" placeholder="enter a 4 digit year-YYYY" maxlength="4" pattern="\d{4}"/>
    <button type="submit" onclick="isLeapYear()">Submit</button>
</body>
</html>

About the motivation, the best part is as you are doing now, trying new techniques bit by bit. Not taking a too big of a task at once, however, what really works for myself is to have a bigger goal on the horizon and breakdown to think about how / what would I need and take it step by step.