Can you determine someone's age by choosing options from dropdown menus?

Hey there. I've been working on a little project for my job, and I put together a simple HTML text file. I'm looking to extract the date of birth from dropdown menus in order to calculate the person's age and then proceed with some other functions.

To achieve this, I set up dropdown lists to choose the date of birth using the <select> tag along with option values. To finalize, I included a submit button utilizing the <input type="submit">

I am aiming to accomplish this task without relying on any external libraries or frameworks.

Do you have any suggestions on how I can accurately determine the individual's age in years?

javascripthtmlcss

Answer №1

it's not exactly precise, and I recommend utilizing a library for more accuracy; however, here is an approximation:

function calculateAge() {
  let day = document.getElementById('day').value;
  let month = document.getElementById('month').value;
  let year = document.getElementById('year').value;
  let birthday = new Date(year, month, day);
  document.getElementById('result').innerHTML = ~~(((Date.now() - birthday) / (31557600000)));
}
<label id="date_of_birth">Date of Birth:<br />
    <select class="first" name="date_of_birth:day" tabindex="7" id="day">
        <option value="">
            <!-- -->
        </option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        ...
        ... // Option values omitted for brevity
        ...
        <option value="1999">1999</option>
        <option value="2000">2000</option>
    </select>
    <button onclick="calculateAge()">
        calculate
    </button>
    <br>
    <div id="result" text="asdaaa">
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

FamilyTree= { "name":"Family", "photo":"images/family.jpg", "members":[ { "name":"Parent", "photo":"images/parent.jpg", "relationships":[ { "name":"Spouse", "photo":"images/spouse.jpg" }, ...

javascriptjsonobject

What is the best way to align two spans vertically on either side of a div, in relation to the div itself?

At the current moment, it appears as follows: _______________________________________ | | | ___________ | | | | | | ______ | div | ______ | | |s ...

htmlcssalignment

Utilize the functions.php script in the footer, rather than in the head section

Encountered an issue in my JS file where a hover event listener was causing a 'Cannot read property 'addEventListener' of null' error. The code snippet I used for the listener came from W3 schools and targeted elements with the class "c ...

javascriptphpwordpress

Extension ConfirmButtonExtender

There is a scenario where I need to skip the ConfirmButtonExtender based on the value of another field in the page. Typically, when a user clicks on my "Cancel" button, a modal popup appears using the confirmbuttonextender and the modalpopupextender. The ...

c#asp.netjavascript

Creating a persistent toolbar in Vuetify: Tips and tricks

Within my Vuetify app, I've implemented a toolbar: <v-toolbar dark color="primary"> <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon> <v-toolbar-title>{{drawer.title}}</v-toolb ...

javascriptvue.jsvuejs2vuetify.js

Java script request via Ajax is failing to execute

Within my HTML code, I have included a button like so: <button type="submit" id="post-form" class="btn btn-primary" onclick="send()">Send</button> Accompanying this is the JavaScript function send() : fu ...

javascripthtmljquerycssajax

Is it possible to create horizontal scrolling lanes using HTML and CSS?

Simple code snippet: <div id="page-wrap"> <div class="post horizontal"> <h2>Headline 01</h2> <div class="entry"> <p>Lorem ipsum dolor...</p> <p class="image"><img class= ...

htmlcsslayoutscroll

Creating a request again after a promise has been fulfilled in Angular

I'm struggling to understand a simple concept here. My objective is to retrieve data from a service, which fetches data from an endpoint, and then be able to update that stored data by refreshing the endpoint. .service('myService', function ...

javascriptangularjspromise

How to center two divs side by side horizontally using Bootstrap

How can I make the layout work on screens 575px and below with the class "col-xs-6 col-sm-6 col-md-8"? <div class="container"> <div class="row align-items-center"> <div class=&q ...

htmlcssbootstrap-4

The Sublime/TAG feature "Eliminate Selected Attributes from Tags" does not support the removal of "data-reactid" attributes

I am attempting to utilize TAG in Sublime Text 3 -- https://github.com/titoBouzout/Tag When I apply the "Remove Picked Attributes From Tags (in Document)" feature with class it successfully eliminates all class attributes. However, when I use it with ...

htmltagsattributessublimetext3

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

javascriptjqueryhtmlcssfade

What is the best way to align text and images for list items on the same line?

HTML:- ul { list-style-image: url(https://i.sstatic.net/yGSp1.png); } <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisici ...

htmlcss

The process of running npm build is not resulting in the creation of the bundle.js file

I've read through many Q&A threads where people are facing the same issue, but I still can't figure out what's wrong with my code. When I run 'sudo npm run build', no bundle.js file is being created.** This is my code: index ...

javascriptreactjsnpmwebpackbundle

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

Why is Selectpicker failing to display JSON data with vue js?

After running $('.selectpicker').selectpicker('refresh'); in the console, I noticed that it is loading. Where exactly should I insert this code? This is my HTML code: <form action="" class="form-inline" onsubmit="return false;" me ...

javascripthtmljsonvue.js

What is the reason behind the lack of preservation of object state when using Promises?

Here is a code snippet to consider: class ClientWrapper { private client: Client; constructor() { this.client = new Client(); } async connect() : Promise<void> { return this.client.connect(); } async isConne ...

javascripttypescriptasync-awaitpromisees6-promise

Changing the value of a JavaScript variable within the .Net Codebehind

I've run into an issue where I need to update a JavaScript variable after post-back. My initial approach was to use the ClientScript.RegisterStartupScript function, which worked fine during the first page load but failed on subsequent postbacks. I inc ...

javascriptasp.net.net

Having trouble with the NodeJS serialport check function to verify the existence of a port?

My latest project involves creating a Function that checks if a given port exists using an array provided by the SerialPort package. Initially, everything seemed to be working fine as the port was connected. However, I noticed a strange behavior where run ...

javascriptnode.jsnode-serialport

Unable to modify element attributes in css with tag selectors

I recently started my journey in the field of Web Development with Angela Yu's Web Development bootcamp. Currently, I am utilizing bootstrap v5, html5, and CSS3. While working on a project, I encountered an issue where I wasn't able to modify th ...

htmlcsstwitter-bootstrapbootstrap-5

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

javascriptjqueryonclick