如何当我点击按钮我的标题不会改变?
问题描述:
我知道这应该是相当容易的,并且除了这个之外,所有功能的一些奇怪的原因。我没有看到任何可能导致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>
答
如果应用该样式身体,这将是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>
答
你有一个错字是
<button onclick="changeColor()">About</button>
,而不是
<button onclick="changedColor()">About</button>
答
在你的HTML
更改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>
你有changedColor代替changeColor(注意ED) –