如何处理按钮的onclick事件？
[英]How to handle onclick event of a button?
问题描述
In the below code, 
在下面的代码中，
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.background-color = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.background-color="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike">Like</button>
</body>
</html>
error is thrown at line document.body.lastElementChild.style.background-color = "#FF9966"; 在document.body.lastElementChild.style.background-color = "#FF9966";行处引发错误document.body.lastElementChild.style.background-color = "#FF9966"; . 。 Error is Invalid left-hand side in assignment . 错误是Invalid left-hand side in assignment 。
How do I resolve this error? 如何解决此错误？
Note: yet to learn JQuery 注意：尚未学习JQuery
7 个解决方案
解决方案1
2 已采纳 2015-12-16 01:50:57
First of all you need to use element.style.backgroundColor instead of element.style.background-color . 首先，您需要使用element.style.backgroundColor而不是element.style.background-color 。
Here is a list of the JS equivalent of CSS attributes. 这是等效于CSS的JS列表。
Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChild of body . 第二个问题是您的脚本在加载<button>之前执行，因此使该脚本成为body的当前lastElementChild 。
You can solve this by wrapping your script in window.onload : 您可以通过将脚本包装在window.onload来解决此问题：
(Also, selecting your button with document.body.lastElementChild is bound to give you errors since you most likely at some point will add something after the button) （此外，使用document.body.lastElementChild选择按钮必然会给您带来错误，因为您很可能在某个时候会在按钮之后添加一些内容）
<!DOCTYPE html> <html> <head> <title>Button events</title> <meta charset="UTF-8"> <style type="text/css"> button { background-color: #00FFFF; border: 2px solid orange; border-radius: 10px; width: 60px; height: 30px; color: white; } </style> </head> <body> <script type="text/javascript"> window.onload = function() { var likeButton = document.getElementById("like-button"); likeButton.onclick = changeColor; function changeColor() { if (likeButton.innerHTML == "Like") { likeButton.style.backgroundColor = "#FF9966"; likeButton.innerHTML = "Unlike"; } else { likeButton.style.backgroundColor = "#00FFFF"; likeButton.innerHTML = "Like"; } } } </script> <button type="button" name="LikeUnlike" id="like-button">Like</button> </body> </html>
解决方案2
1 2015-12-16 01:30:44
background-color is not a valid JavaScript identifier. background-color不是有效的JavaScript标识符。 For setting it with DOM style object, it should be backgroundColor in camel case. 要使用DOM样式对象进行设置，在驼峰情况下应为backgroundColor 。
More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp 有关DOM样式对象的更多信息， 请访问http://www.w3schools.com/jsref/dom_obj_style.asp
解决方案3
1 2015-12-16 01:31:43
JS JS
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
解决方案4
1 2015-12-16 01:39:09
我认为您应该使用document.body.lastElementChild.style["background-color"]设置元素的颜色
解决方案5
0 2015-12-16 01:27:31
not background-color but backgroundColor . 不是background-color，而是backgroundColor。 Try this and see if works 试试这个，看看是否可行
document.body.lastElementChild.style.backgroundColor = "#FF9966" ; document.body.lastElementChild.style.backgroundColor = "#FF9966" ;
the total code: 总代码：
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
解决方案6
0 2015-12-16 01:47:37
You use this code. 您使用此代码。 It is working fine. 一切正常。
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor =
"#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike" onclick="changeColor
()">Like</button>
</body>
</html>
解决方案7
0 2015-12-16 02:13:40
You can use Jquery for assign or remove a css class, to add color to your button, with this code: 您可以使用Jquery分配或删除CSS类，使用以下代码为按钮添加颜色：
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
the toggleClass function is to add and remove a css class, " othercolor " is your class css with the styles to your button. toggleClass函数用于添加和删除css类，“ othercolor ”是具有按钮样式的css类。
Include jquery with this script before </body> and before the code above: 在此脚本之前</body>以及上面的代码之前添加jquery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this: 像这样：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
I hope it helps you. 希望对您有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.