I'm currently attempting to change the color of all three headers to red when the "Red Headings" button is clicked by utilizing the changeStuff function. However, it doesn't appear to be functioning correctly. Can someone confirm if this is the appropriate function to achieve this task?
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has its own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script>
"jquery-2.1.4.js"
</script>
<script>
function changeStuff() {
$("h").addClass("redElements");
}
$("theRedButton").bind("click", changeStuff);
</script>
</body>