使该DOB计算器起作用的步骤是什么？ 的JavaScript
[英]What are the steps to make this dob calculator work ? JavaScript
问题描述
Hey i'm doing a homework on how to make a dob calculator on JavaScript. 
嘿，我正在做有关如何在JavaScript上制作DOB计算器的作业。 I'm a beginner by the way. 顺便说一下，我是一个初学者。 This exercice is about calculating age based on 3 select and then i display it with an alert() i need some of you to help me on what to do on JavaScript. 这个练习是关于基于3选择来计算年龄的，然后我用alert（）显示它，我需要一些人来帮助我在JavaScript上做什么。
I create some variable to get the values of these select but it doesn't work as i expected. 我创建了一些变量来获取这些选择的值，但它没有按我的预期工作。 I don't know what are the steps make it functional 我不知道有什么步骤可以使其正常运行
<form action="#" method="post">
<div class="field dob">
<label for="dob-day">Day:</label>
<select name="dob-day" id="dob-day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="field dob">
<label for="dob-month">Month:</label>
<select name="dob-month" id="dob-month">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avrl</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</div>
<div class="field dob">
<label for="dob-year">Year:</label>
<select name="dob-year" id="dob-year">
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
<div class="actions">
<button type="button" id="run">Run</button>
</div>
</form>
Here's my code on JavaScript... 这是我的JavaScript代码...
let now = new Date();
let day = document.getElementById("dob-day").value;
let month = document.getElementById("dob-month").value;
let year = document.getElementById("dob-year").value;
(function() {
document.getElementById("run").addEventListener("click", function(){
})
})();
1 个解决方案
解决方案1
1 已采纳 2019-01-24 10:07:03
YOu will not need an iife and get the value of day,month and year inside the click function. 您将无需再添麻烦，并且可以在click函数中获取日，月和年的值。
Then using Date function convert the input to date and subtract from current date and get the number of days. 然后使用Date函数将输入转换为日期，然后从当前日期中减去并获得天数。
document.getElementById("run").addEventListener("click", function() { let now = new Date(); let day = document.getElementById("dob-day").value; let month = document.getElementById("dob-month").value; let year = document.getElementById("dob-year").value; var timeDiff = Math.abs((new Date(`${month}/${day}/${year}`)).getTime() - now.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); console.log(diffDays) })
<form action="#" method="post"> <div class="field dob"> <label for="dob-day">Day:</label> <select name="dob-day" id="dob-day"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> <div class="field dob"> <label for="dob-month">Month:</label> <select name="dob-month" id="dob-month"> <option value="1">Janvier</option> <option value="2">Février</option> <option value="3">Mars</option> <option value="4">Avrl</option> <option value="5">Mai</option> <option value="6">Juin</option> <option value="7">Juillet</option> <option value="8">Août</option> <option value="9">Septembre</option> <option value="10">Octobre</option> <option value="11">Novembre</option> <option value="12">Décembre</option> </select> </div> <div class="field dob"> <label for="dob-year">Year:</label> <select name="dob-year" id="dob-year"> <option value="1955">1955</option> <option value="1956">1956</option> <option value="1957">1957</option> <option value="1958">1958</option> <option value="1959">1959</option> <option value="1960">1960</option> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963">1963</option> <option value="1964">1964</option> <option value="1965">1965</option> <option value="1966">1966</option> <option value="1967">1967</option> <option value="1968">1968</option> <option value="1969">1969</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> </select> </div> <div class="actions"> <button type="button" id="run">Run</button> </div> </form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
运输计算器，我在此代码中缺少什么使其工作？ - Shipping calculator, What am I missing in this code to make it work?
如何使键盘在计算器中工作 - How to make the keyboard work in a calculator
我的 HTML/Javascript 计算器无法工作 - My HTML/ Javascript calculator will not work
Javascript计算器无法正常运行 - Javascript Calculator does not work properly
我的JavaScript计算器无法正常工作 - my javascript calculator wont work
我刚开始学习 javascript，我正在尝试制作一个计算器网站，但无法让它工作 - i just started learning javascript and i'm trying to make a calculator website but can't get it to work
此JavaScript程序采取的步骤是什么 - What are the steps this JavaScript program takes
PHP制作一个简单的计算器 - 代码不起作用 - PHP Make a simple calculator - Code doesnt work
不确定如何使此计算器功能正常工作 - Unsure of how to make this calculator function work
Javascript计算器功能：它是如何工作的？ - Javascript Calculator Function: How does it work?
相关标签