如何當我點擊按鈕我的標題不會改變？

Question

我知道這應該是相當容易的，並且除了這個之外，所有功能的一些奇怪的原因。我沒有看到任何可能導致onClick事件將標題更改爲藍色的錯誤。有人可以告訴我我做錯了什麼嗎？

這裏是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

如果應用該樣式身體，這將是overriden因爲element有它自己的風格。

因此，將樣式添加到元素。

變化document.body.style.color到document.getElementById('change').style.color

見下

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

你有一個錯字是

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

，而不是

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

Answer 3

更改button onclick函數名稱changedColor至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>

在你的HTML