There are three buttons on this page. When you select one it will change the background color and let you know about it.
The background of this page is white
<!DOCTYPE html>
<html>
<head
<title> Javascript example </title>
<style type="text/css">
body {
font-family : sans-serif ;
}
</style>
</head>
<body>
<h1> Button color changer example </h1>
<p> There are three buttons on this page. When you select one it will change the background color and let you know about it. </p>
<button onclick="red()" change background color to red </button>
<button onclick="green()</button>
<button onclick="blue()"change background color to blue </button>
<p aria-live="assertive" id="color"> background is now white </p>
<script>
function red() {
document.body.style.backgroundColor = "red" ;
document.getElementById("color").innerHTML = "background is now red!" ;
}
function green() {
document.body.style.backgroundColor = "green" ;
document.getElementById("color").innerHTML = "background is now green!" ;
}
function blue() {
document.body.style.backgroundColor = "blue" ;
document.getElementById("color").innerHTML = "background is now blue!" ;
}
</script>
</body>
</html>