I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().innerHTML", but encountered an issue where the text did not revert to its original state.
button {
background-color: green;
border-color: white;
border-radius: 10px;
align-self: center;
}
body {
background-color: black;
}
h1 {
color:green;
text-align: center;
}
p {
color: chartreuse;
font-family: Verdana;
font-size: 12px;
}
button:hover{
background: blue;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<h1>Web Page</h1>
<!-- Buttons -->
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click to display Date and Time</button>
<p id="demo"></p>
<button type="button"
onmouseover="this.innerHTML = Date()"
onmouseout="document.getElementById">What time is it</button>
<script>
var x = "What time is it";
document.getElementById("time").innerHTML = x;
</script>