堆棧內存溢出
  簡體   English   中英

當我想使用 JavaScript 從 HTML 中獲取字符串時，為什么會得到 Null

[英]Why am I getting Null when I want to get a String from an HTML with JavaScript

 原文  2022-06-26 15:06:41  6   3    javascript/ html/ dom

問題描述

我正在嘗試制作一個紀念森的時鍾，我想制作它以便人們可以在其中插入某個日期。

但是當我在 JS 中通過 ID 獲取元素時，我得到了 null。

試圖讓它成為一個字符串並用警報測試它，但我沒有得到任何結果。 它仍然是空的。

我的意思是，警報框是空的，所以我認為它是空的。

我的一些假設是：

  1. id 或 document.getElementById("targetDate").innerHTM 部分有問題
    • 我嘗試將它作為字符串獲取，然后將其轉換為日期，就像我最初使用的那樣：new Date("Jan 5, 2090 15:37:25").getTime()
  2. 我沒有以正確的方式使用日期功能
  3. 也許應該將方法更改為分別獲取日、月、年和小時

這是代碼：

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

3 個解決方案

解決方案1
 2  2022-06-26 15:15:56

我只是將innerHTML替換為value

var targetDate = String(document.getElementById("targetDate").value);

現在我可以從您編碼的警報中獲取日期。 這是一個屏幕截圖： 在此處輸入圖像描述

解決方案2
 2 已采納  2022-06-26 15:16:05

您需要更改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>

解決方案3
 1  2022-06-26 15:19:07

嘗試改用document.querySelector ，或者您也可以只獲取方法value而不是innerHTML 。

還可以通過不將var用於let和const來了解 javascript 的良好實踐。

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

伙計，你的黑客很好！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用ajax從php發送和返回值時，為什么會得到javascript和html代碼？ 為什么我將 JSON 數據從 Javascript 發送到 Flask 時出現錯誤？ 為什么在嘗試使用javascript動態添加html時，我的html字符串中的字符丟失了？ 為什么我無法讀取 null javascript 的屬性“addEventListener” 為什么在JavaScript中讀取XML文件時會得到空結果？ 如何在iframe中將頁面內容獲取為JavaScript中的字符串？ 我想要一切 <html> 至 </html> 使用解析的字符串時，為什么會出現錯誤“無法讀取null的屬性&#39;名稱&#39;”？ 為什么即使兩個密碼字符串完全匹配，我也會從 bcrypt 比較中得到 isMatch null？ 為什么當我生成錯誤時我收到字符串錯誤？ 使用jQuery將HTML字符串放入首頁時，為什么會變得未定義？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM