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代码中存在语法错误。如果删除。在Date。（）;中应该可以。

更新：我已经用代码段包装了代码示例，因此您可以自己运行并查看。如果您的代码不起作用，则可以检查您是通过浏览器中的文件系统直接访问页面还是在http://example.com/sample-page.html或http://localhost/sample-page.html

这样的服务器上访问页面

有时，如果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的第一行中也注意到了一个较小的语法错误。应该在函数名称后添加（）来调用函数，但是当我在代码段工具中签入时，如果没有它们，函数也可以正常工作。但以防万一，我已纠正了该错误。对不起，以前错过了。该代码块也可能会立即触发，而无需等待click事件，因此我对其进行了编辑，以将代码完全封装在附加到DOM元素ID的onclick事件函数中。因此，无论现在，这都应该起作用。

另一个解决方案可能是即使在html中也可以在按钮的onclick上触发此功能，例如：

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>

Answer 2

有几种方法可以解决您的问题。但是更干净，更快捷的方法是像这样修改displayDate函数：

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

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

还请注意，您当前的代码中存在语法错误。删除"."

中的"Date.()"

编辑：预期功能JSFIDDLE

Answer 3

尝试一下：

<html>
<head>
    <script>
        function loadFunction()
        {
            document.getElementById("timeDate").style.display = "none";
        }

        function displayDate() {
            var dateField;

            dateField = document.getElementById("timeDate");

            dateField.innerHTML = Date();

            dateField.style.display = (dateField.style.display == "")?"none":"";
        }
    </script>
</head>
<body onload="loadFunction();">
    <div id="al">
        <button id="btnTimeDate" type="button" onclick="displayDate();">Time & Date</button>
        <p id="timeDate"></p>
    </div>
</body>
</html>

Answer 4

您需要单词{new}

var d = new Date（）; document.getElementById（“ demo”）。innerHTML = d;

Answer 5

您必须将JavaScript代码封装在其中，

window.onload = () => {
    // your javascript
};

也就是说，

window.onload = () => {
    document.getElementById("btnTimeDate").addEventListener("click", displayDate);

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

您的脚本在圆顶就绪之前运行！

这是一个小小的实现https://plnkr.co/edit/xue9l0wiriGitM8Tuz6c?p=preview

Answer 6

可以编写以下代码：

    <html>
       <head>
          <title>(Type a title for your page here)</title>
          <script type="text/javascript"> 
             function show_now() { 
             var my_time = new Date();
             alert(my_time); 
           }
          </script>
      </head>
      <body>
         <input type=button value="Show Time" onclick="show_now();">
      </body>
  </html>

希望这对您有所帮助。谢谢。

Answer 7

可以编写以下代码：

public static void Main()
{
    displayLabel.Text = GetRandomsAsString(gameAmountInteger);
}

private string GetRandomsAsString(int numberOfrandoms)
{
    var valueRandom = new Random();
    var randoms = "";
    for (int i = 0; i < numberOfrandoms; i++)
    {
        randoms += valueRandom.Next(0, 10);
    }

    return randoms;
}

我的代码未显示日期和时间，如何使它起作用？另外，我可以再次单击该按钮以隐藏/显示日期和时间吗？

7 个答案: