我正在嘗試制作一個紀念森的時鐘，我想制作它以便人們可以在其中插入某個日期。
但是當我在 JS 中通過 ID 獲取元素時，我得到了 null。
試圖讓它成為一個字串并用警報測驗它，但我沒有得到任何結果。它仍然是空的。
我的意思是，警報框是空的，所以我認為它是空的。
我的一些假設是：
- id 或 document.getElementById("targetDate").innerHTM 部分有問題
- 我嘗試將它作為字串獲取，然后將其轉換為日期，就像我最初使用的那樣：new Date("Jan 5, 2090 15:37:25").getTime()
- 我沒有以正確的方式使用日期功能
- 也許應該將方法更改為分別獲取日、月、年和小時
這是代碼：
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>?? Days Until Death</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main-div">
<h2>?? Days Until Death</h2>
<hr>
<h1><p id="demo"></p></h1>
<hr>
<input id="targetDate" type="input" name="date" value="Jan 1, 2090 15:37:25">
<input onclick="ChangeDate()" type="submit" name="" value="Change Date">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
JavaScript：
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2090 15:37:25").getTime();
function ChangeDate() {
var targetDate = String(document.getElementById("targetDate").innerHTML);
alert(targetDate);
countDownDate = new Date(targetDate).getTime();
}
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days "d " hours "h "
minutes "m " seconds "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
uj5u.com熱心網友回復：
你需要innerHTML改變value
也不需要將其轉換為String，并避免使用 html 行內事件偵聽器
// Set the date we're counting down to
let countDownDate = new Date("Jan 5, 2090 15:37:25").getTime();
const demo = document.getElementById('demo');
const changeDateInput = document.getElementById('changeDateInput');
function ChangeDate() {
const targetDate = document.getElementById('targetDate').value;
console.log(targetDate);
countDownDate = new Date(targetDate).getTime();
}
changeDateInput.addEventListener('click', ChangeDate)
// Update the count down every 1 second
const x = setInterval(() => {
// Get today's date and time
const now = new Date().getTime();
// Find the distance between now and the count down date
const distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
demo.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s `;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
demo.innerHTML = "EXPIRED";
}
}, 1000);<div class="main-div">
<h2>?? Days Until Death</h2>
<hr>
<h1>
<p id="demo"></p>
</h1>
<hr>
<input id="targetDate" type="input" name="date" value="Jan 1, 2090 15:37:25">
<input id="changeDateInput" type="submit" name="" value="Change Date">
</div>uj5u.com熱心網友回復：
我只是將innerHTML替換為 value
var targetDate = String(document.getElementById("targetDate").value);
現在我可以從您編碼的警報中獲取日期。這是一個螢屏截圖：
uj5u.com熱心網友回復：
嘗試使用document.querySelector，或者您也可以只獲取方法value而不是innerHTML.
還可以通過不使用varforlet和來了解使用 javascript 的良好做法const。
https://hackernoon.com/why-you-shouldnt-use-var-anymore-f109a58b9b70 https://www.geeksforgeeks.org/what-is-the-disadvantage-of-using-innerhtml-in-javascript/
let countDownDate = new Date("Jan 5, 2090 15:37:25").getTime();
function ChangeDate() {
const newTargetData = document.querySelector("#targetDate").value;
alert(newTargetData);
countDownDate = new Date(newTargetData).getTime();
}
// Update the count down every 1 second
const x = setInterval(function() {
// Find the distance between now and the count down date
const distance = countDownDate - Date.now();
// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days "d " hours "h "
minutes "m " seconds "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
伙計，你的黑客很好！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495668.html
標籤：javascript html dom