我需要帮助修复我的HTML和JavaScript代码。

huangapple
go评论93阅读模式
英文:

I need help fixing my html and java script code

问题

我想创建一个地方，你可以输入你的下一个生日，页面会使用 window.alert 告诉你距离你的生日还有多少天。当我运行这段代码时，在我输入生日之前，警报显示 NaN，这意味着不是一个数字。我希望在我输入生日并点击提交后它能够正常工作。这是我的代码：

  1. <form name="form">
  2.     <input type="date" id="bday"><br><br>
  4.     <input type="submit" value="Submit">
  5. </form>
  7. <script>
  8.     let date_1 = new Date(document.getElementById("bday").value);
  9.     let date_2 = new Date();
  10.     
  11.     let difference = date_1.getTime() - date_2.getTime();
  12.     let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
  13.     window.alert(TotalDays);
  14. </script>
  15. </body>

注意： 这段代码在加载页面时就会计算日期差异并显示 window.alert，而不是在点击提交按钮后再进行计算。如果你想在点击提交按钮后才计算，需要将 JavaScript 代码放入一个函数中，并在提交按钮的点击事件上调用该函数。

英文:

I want to make a place where you key in your next birthday and the page does a window.alert to tell you how many days are left for your birthday. When I run the code, before I key in the birthday, the alert says NaN which means not a number. I want it to work after I key in the birthday after I click submit. This is what I coded:

` <form name = "form">
<input type="date" id="bday"><br><br>

  1. &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  2.     
  3. &lt;/form&gt;
  5. &lt;script&gt;
  6. let date_1 = new Date(document.getElementById(&quot;bday&quot;).value);
  7. let date_2 = new Date();
  9. let difference = date_1.getTime() - date_2.getTime();
  10. let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
  11. window.alert(TotalDays);
  13. &lt;/script&gt;
  14. &lt;/body&gt;`

答案1

得分: 0

我看到基本上有两个问题。
首先，你从bday获取的值将是一个字符串，所以你应该确定该值的格式。你需要获取日、月和年，以创建一个字符串，例如"day/month/year"，然后使用Date.parse()将其转换为日期类型。

其次，要获取实际日期，你应该使用Date.now()。仅构造函数本身不会起作用。

应用这些更改后，我们有：

  1. let date_1 = Date.parse("13/10/2023");
  2. let date_2 = Date.now();
  4. let difference = date_1 - date_2;
  5. let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
  6. window.alert(TotalDays);
英文:

I see basically two problems here.
First of all, the value that you are getting from bday is going to be a string, so you should be sure of the format of that value. You need to get the day, the month and the year, in order to create a string like "day/month/year", to convert it into a date type, using Date.parse().

Secondly, to get the actual date, you should use Date.now(). The constructor alone will not work.

Apllying these changes we have:

  1. let date_1 = Date.parse(&quot;13/10/2023&quot;);
  2. let date_2 = Date.now();
  4. let difference = date_1 - date_2;
  5. let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
  6. window.alert(TotalDays);

答案2

得分: -1

  1. &lt;!-- 开始代码段：js 隐藏：false 控制台：true Babel：false --&gt;
  3. &lt;!-- 语言：lang-js --&gt;
  5.     &lt;!DOCTYPE html&gt;
  6.     &lt;html&gt;
  7.     &lt;head&gt;
  8.       &lt;title&gt;生日倒计时&lt;/title&gt;
  9.     &lt;/head&gt;
  10.     &lt;body&gt;
  11.       &lt;form onsubmit=&quot;calculateDaysLeft(event)&quot;&gt;
  12.         &lt;label for=&quot;bday&quot;&gt;输入您的生日：&lt;/label&gt;
  13.         &lt;input type=&quot;date&quot; id=&quot;bday&quot; name=&quot;bday&quot; required&gt;
  14.         &lt;input type=&quot;submit&quot; value=&quot;提交&quot;&gt;
  15.       &lt;/form&gt;
  17.       &lt;script&gt;
  18.         function calculateDaysLeft(event) {
  19.           event.preventDefault(); // 防止表单提交以避免页面重新加载
  21.           // 从输入字段获取用户生日
  22.           let userBirthday = new Date(document.getElementById(&quot;bday&quot;).value);
  24.           // 获取当前日期
  25.           let currentDate = new Date();
  27.           // 计算毫秒差异
  28.           let difference = userBirthday.getTime() - currentDate.getTime();
  30.           // 计算天数差异并显示警报
  31.           let totalDays = Math.ceil(difference / (1000 * 3600 * 24));
  32.           window.alert(`距离您的生日还有 ${totalDays} 天！`);
  33.         }
  34.       &lt;/script&gt;
  35.     &lt;/body&gt;
  36.     &lt;/html&gt;
  38. &lt;!-- 结束代码段 --&gt;
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.   &lt;title&gt;Birthday Countdown&lt;/title&gt;
  5. &lt;/head&gt;
  6. &lt;body&gt;
  7.   &lt;form onsubmit=&quot;calculateDaysLeft(event)&quot;&gt;
  8.     &lt;label for=&quot;bday&quot;&gt;Enter your birthday:&lt;/label&gt;
  9.     &lt;input type=&quot;date&quot; id=&quot;bday&quot; name=&quot;bday&quot; required&gt;
  10.     &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  11.   &lt;/form&gt;
  13.   &lt;script&gt;
  14.     function calculateDaysLeft(event) {
  15.       event.preventDefault(); // Prevent form submission to avoid page reload
  17.       // Get the user&#39;s birthday from the input field
  18.       let userBirthday = new Date(document.getElementById(&quot;bday&quot;).value);
  20.       // Get the current date
  21.       let currentDate = new Date();
  23.       // Calculate the difference in milliseconds
  24.       let difference = userBirthday.getTime() - currentDate.getTime();
  26.       // Calculate the difference in days and show the alert
  27.       let totalDays = Math.ceil(difference / (1000 * 3600 * 24));
  28.       window.alert(`There are ${totalDays} days left until your birthday!`);
  29.     }
  30.   &lt;/script&gt;
  31. &lt;/body&gt;
  32. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月31日 21:09:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76803962.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定