繁体   English   中英

如何推回javascript上的按钮?

[英]How to push back the button on javascript?

我开始从W3scholl学习 javascript。 我想制作本教程中的按钮:

<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 

再次按下按钮后,我想清除日期文本,该怎么做?

您可以添加一个新按钮,如下所示:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
 Click me to display Date and Time.
</button>

<button type="button" onclick="Empty()">
 Click me to delete Date and Time.
</button>

<script>
function Empty(){
document.getElementById('demo').innerHTML = "";
}
</script>

<p id="demo"></p>

</body>
</html> 

您可以引入全局变量state并保存最后更改的状态。

单击按钮调用toggle ,该函数评估下一个操作的state 在函数结束时, state随着逻辑 NOT发生变化! .

 function toggle() { if (state) { // check state document.getElementById('demo').innerHTML = ''; document.getElementById('button1').innerHTML = 'Click me to display Date and Time.' } else { document.getElementById('demo').innerHTML = Date(); document.getElementById('button1').innerHTML = 'Delete Date and Time.' } state = !state; // toggle state } var state; // undefined, becomes later true and false
 <button id="button1" type="button" onclick="toggle()">Click me to display Date and Time.</button> <p id="demo"></p>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM