How to push back the button on javascript?

Question

I start to learn javascript from W3scholl . I wanna make the push button from this tutorial :

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

I want to clear the date text after I push the button again, how to do this?

Answer 1

You could add a new button like this:

<!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>

Answer 2

You could introduce a global variable state and save the last changed state.

Click on button calls toggle and the function evaluates state for the next action. At the end of the function state changes with the logical 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>

How to push back the button on javascript?

Question

2 answers

solution1
0 2017-01-17 08:55:41

solution2
0 ACCPTED 2017-01-17 09:05:29

How to push back the button on javascript?

Question

2 answers

solution1 0 2017-01-17 08:55:41

solution2 0 ACCPTED 2017-01-17 09:05:29

solution1
0 2017-01-17 08:55:41

solution2
0 ACCPTED 2017-01-17 09:05:29