Q:

.on Event Listener not working

Why this code not working!?
html
    <!DOCTYPE html>
<html>
<head>
    <title>Ending Project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="events.js"></script>
</head>
<body>
    <input type="button" value="Click">
    <h1>Changing</h1>
</body>

</html>

the javascript code:
    $("input").on("click" , function(){
    $("h1").css("background-color" , "black");
});

I trying to change the background color when i click the button
but it not working and I am doing it like the documentation say! 

A:

From my point of view it has 2 options, I do not know which one is the best.
First, as it says "dfsq" put your code inside a   function
<input type="button" value="Click">
<h1>Changing</h1>
<script type="text/javascript">
    $(function () {
        $("input").on("click", function () {
            $("h1").css("background-color", "black");
        });
    });
</script>

or second create a function and call it from the input
<input type="button" onclick="changeColor()" value="Click">
<h1>Changing</h1>
<script type="text/javascript">
    function changeColor(){
        $("h1").css("background-color", "black");
    }
</script>

