javascript - 我的代码不显示日期和时间，如何使其工作？另外，我可以再次单击该按钮来隐藏/显示日期和时间吗

Question

我创建了一个显示当前日期和时间的按钮。我的问题是，当我再次单击该按钮时，它不会隐藏日期和时间。你能帮我吗？

我已经尝试过:

HTML:

<div id="al">
   <button id="btnTimeDate" type="button">Time & Date</button>

   <p id="timeDate"></p>
</div>

JavaScript:

document.getElementById("btnTimeDate").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("timeDate").innerHTML = Date.();
}

但是当我点击它时它不起作用。

我现在拥有的并且它可以工作，但我希望它不那么困惑，并且让用户单击按钮来显示/隐藏时间和日期。

HTML

<button type="button" onclick="document.getElementById('date_time_button').innerHTML = Date()"> Click and see Date and Time.</button>

<p id="date_time_button"></p>

Answer 1

您的 JavaScript 代码中有语法错误。如果您删除 .在日期中。();它应该可以工作。

更新:我用一个片段包装了代码示例，以便您可以运行并亲自查看。如果您的代码无法正常工作，那么您可以检查您是否直接通过浏览器中的文件系统访问该页面，或者是否在像 http://example.com/sample-page.html 这样的服务器上或http://localhost/sample-page.html

有时，如果 JavaScript 不是来自服务器，则可能会受到限制。或者您可能在再次测试之前没有刷新浏览器的缓存。如果 JavaScript 不是直接嵌入到同一页面的 html 代码中，而是链接到外部 .js 文件，这可能会导致 JavaScript 无法加载。

var clickState = 0;
document.getElementById("btnTimeDate").onclick = function(){
  if (clickState == 0) {
    document.getElementById("timeDate").innerHTML = Date();
    clickState = 1;
  } else {
    document.getElementById("timeDate").innerHTML = "";
    clickState = 0;
  }
}

<button id="btnTimeDate">Get Date</button>
<div id="timeDate"></div>

注意:我还注意到上面 JavaScript 的第一行有一个小语法错误。函数应该在其名称后添加 () 来调用，但是当我 checkin 代码片段工具时，没有它们它也可以工作。但为了以防万一，我已经纠正了这个错误。抱歉之前错过了。该代码块也可能会立即触发，而无需等待单击事件，因此我对其进行了编辑，将代码完全封装在附加到 DOM 元素 id 的 onclick 事件函数内。所以无论如何，现在这应该可以工作。

另一种解决方案可能是在按钮的 onclick 上触发此函数，即使是在 html 中，如下所示:

var clickState = 0;
function displayDate() {
  if (clickState == 0) {
    document.getElementById("timeDate").innerHTML = Date();
    clickState = 1;
  } else {
    document.getElementById("timeDate").innerHTML = "";
    clickState = 0;
  }
}

<button id="btnTimeDate" onclick="displayDate()">Get Date</button>
<div id="timeDate"></div>

这些应该都可以。但是，每次触发此函数时，日期值都会发生变化。因此，我建议您获取页面加载时的日期，然后使用按钮的事件隐藏和显示此元素，以便该值不会更改。因此，我在下面添加了一个额外的代码片段，它的作用就是:

var dateDiv = document.getElementById("timeDate");
dateDiv.innerHTML = Date();
dateDiv.style.visibility = 'hidden';
document.getElementById("btnTimeDate").onclick = function(){
  if (dateDiv.style.visibility == 'hidden') {
    dateDiv.style.visibility = 'visible';
  } else {
    dateDiv.style.visibility = 'hidden';
  }
}

<button id="btnTimeDate">Show/Hide Date</button>
<div id="timeDate"></div>