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

Question

**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));

Ricardo Cino · Answer 1 · 2023-02-03T18:42:14.873

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.

Thank you so very much for your guidance on the code and your answer on what keeps you motivated!! I truly appreciate it. — Veronica, Feb 03 '23 at 18:26
@SwaD Sharp one, should've been. Gotta love the incosistancy and the fact it does work in the browser :p — Ricardo Cino, Feb 03 '23 at 18:42

score 0 · Answer 2 · answered Feb 03 '23 at 18:18

0

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

answered Feb 03 '23 at 18:18

Syed Aman Ali

151
5

@Veronica it is happen because **type** in `input` must by "number" and you have "number**s**" – SwaD Feb 03 '23 at 18:33

score 0 · Answer 3 · answered Feb 03 '23 at 18:25

0

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>

answered Feb 03 '23 at 18:25

SwaD

492
2
9

Thank you so much for this. It finally works! Adding the AddEventListener worked. My question is: Do I always need that for this particular example? I'm sorry, I'm just trying to understand. Also is 'input' in the javascript code an argument, or does it refer to my html input tag? – Veronica Feb 03 '23 at 22:10
@Veronica It all depends on what kind of behavior you want to achieve. – SwaD Feb 03 '23 at 22:13
Thanks!!!!! One more question if I may, Is 'input' in the javascript code an argument, or does it refer to my html input tag? – Veronica Feb 03 '23 at 22:14
@Veronica `input` HTML tag has attribut **type**. type=text have event change, type=number have event input. In order to respond to tag change events, we create a listener that is responsible for the desired event. In our case, this is an input event that matches the tag name **input**. – SwaD Feb 03 '23 at 22:21

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

3 Answers3