当我单击按钮时标题不会改变怎么办？

Question

I know this should be fairly easy, and for some odd reason of all functions work except for this one. I don't see anything I could've possibly done wrong to prevent the onClick event to change the header to blue. Can someone please tell me what I'm doing wrong?

Here is the jfiddle: https://jsfiddle.net/CheckLife/680dvv5j/13/

 #change { color: red; } 

 <h1 id="change">NBA Legends</h1> <button onclick="changedColor()">About</button> <script> document.getElementById('change').onclick = changeColor; function changeColor() { document.body.style.color = "blue"; return false; } </script> 

Answer 1

If you apply the style to body, it will be overriden because the element has it's own style.

So , add the style to the element.

change document.body.style.color to document.getElementById('change').style.color

See below

 document.getElementById('change').onclick = changeColor; function changeColor() { document.getElementById('change').style.color = "#00f"; return false; } 

 #change { color:red; } 

 <h1 id="change">NBA Legends</h1> <button onclick="changeColor()">About</button> 

Answer 2

you have a typo is

<button onclick="changeColor()">About</button>

instead of

<button onclick="changedColor()">About</button>

Answer 3

Change button onclick Function name changedColor to changeColor .

  document.getElementById('change').onclick = changeColor; function changeColor() { var element = document.getElementById('change') element.style.color = "blue"; return false; } 

 #change { color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 id="change">NBA Legends</h1> <button onclick="changeColor()">About</button>