Change css property using jquery : <p>Please check the code bellow. I want to change a css property after click on 'switch' button. Whats wrong i am doing here? Also please help me to do this with any other way if possible. Thanks all </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;test&lt;/title&gt;

    &lt;script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"&gt;&lt;/script&gt;

    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;


&lt;button id="myButton"&gt;switch&lt;/button&gt;

&lt;p class="foo"&gt;Some text&lt;/p&gt;




&lt;script type="text/javascript"&gt;

$("#myButton").click(function() {
  $(".foo").attr("background", "red");
});

&lt;/script&gt;


&lt;style&gt;
.foo {
  background: gray;
}

&lt;/style&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
