Changing Background Color using JavaScript and jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple interactivity with DOM & CSS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body id="body">
  <h1>Hello, World!</h1>
  <form>

    <br> Document Object:
    <input type=button value="Make Night" onclick="document.body.style.backgroundColor = 'black';">
    <input type=button value="Make Day" onclick="document.body.style.backgroundColor = 'white';">

    <br><br> getElementById:
    <input type=button value="Make Night" onclick="document.getElementById('body').style.background = 'black';">
    <input type=button value="Make Day" onclick="document.getElementById('body').style.background = 'white';">

    <br><br> jQuery:
    <input type=button id="Make_Night" value="Make Night">
    <input type=button id="Make_Day" value="Make Day">

    <br><br> Event Listener:
    <input type=button id="Make_Night_Listener" value="Make Night">
    <input type=button id="Make_Day_Listener" value="Make Day">

  </form>

</body>
</html>

// This is jQuery code

$(document).ready(function() {
  $("#Make_Night").on("click", function() {
    $("body").first().css("background-color", "black");
  });
  $("#Make_Day").on("click", function() {
    $("body").first().css("background-color", "white");
  });
});

window.onload = function() {
  document.getElementById("Make_Night_Listener").addEventListener("click", function() {
    document.getElementById('body').style.background = 'black';
  });

  document.getElementById("Make_Day_Listener").addEventListener("click", function() {
    document.getElementById('body').style.background = 'white';
  });
}

/* Styles go here */

body {
  background-color: white;
}

h1 {
  font-family: Verdana, serif;
  color: red;
}

Changing Background Color using JavaScript and jQuery
Author: Jozef Jarosciak