如何处理按钮的onclick事件

How to handle onclick event of a button?

本文关键字：按钮 onclick 事件 处理 何处理      更新时间：2023-09-26

在下面的代码中，

<!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>

在document.body.lastElementChild.style.background-color = "#FF9966";行引发错误。错误为Invalid left-hand side in assignment。

如何解决此错误？

注意：尚未学习JQuery

首先需要使用element.style.backgroundColor而不是element.style.background-color。

以下是CSS属性的JS等价物列表。

第二个问题是，您的脚本在加载<button>之前执行，因此使脚本成为body的当前lastElementChild。

您可以通过将脚本封装在window.onload:中来解决此问题

（此外，用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>

background-color不是有效的JavaScript标识符。要用DOM样式对象设置它，在camel大小写中应该是backgroundColor。

有关DOM样式对象的详细信息，请访问http://www.w3schools.com/jsref/dom_obj_style.asp

查看我的演示

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";  
                }
            }

我认为应该使用document.body.lastElementChild.style["background-color"]为元素设置颜色

不是背景色，而是背景色。试试看是否有效
document.body.lastElementChild.style.backgroundColor = "#FF9966"
总代码：

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";  
        }
    }

您可以使用此代码。它运行良好。

<!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>

您可以使用Jquery来分配或删除css类，为按钮添加颜色，代码如下：

<script>
    $(function() {
        $('button').on('click', function() {
            $(this).toggleClass('other-color');
        });
    });
</script>

toggleClass函数用于添加和删除css类，"othercolor"是带有按钮样式的css类。

在</body>之前和上面的代码之前将jquery包含在这个脚本中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

像这样：

<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>

我希望它能帮助你。

相关文章：