CODEWITHSUNDEEP
javascripthtmlcss
overexchange
overexchange

Reputation: 1

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";. Error is Invalid left-hand side in assignment.

How do I resolve this error?

Note: yet to learn JQuery

Upvotes: 1

Views: 120

Answers (7)

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

You can use Jquery for assign or remove a css class, to add color to your button, with this code: 

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

Include jquery with this script before </body> and before the code above:

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

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

First of all you need to use element.style.backgroundColor instead of element.style.background-color.

Here is a list of the JS equivalent of CSS attributes.

Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChildof body.

You can solve this by wrapping your script in 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)

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

Upvotes: 2

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

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>

Upvotes: 0

dieuvn3b
dieuvn3b

Reputation: 6114

I think you should use document.body.lastElementChild.style["background-color"] to set color for element

Upvotes: 1

yaochiqkl
yaochiqkl

Reputation: 489

not background-color but backgroundColor . Try this and see if works
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";  
        }
    }

Upvotes: 0

Fiido93
Fiido93

Reputation: 1978

Check out my demo

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

Upvotes: 1

PSWai
PSWai

Reputation: 1188

background-color is not a valid JavaScript identifier. For setting it with DOM style object, it should be backgroundColor in camel case.

More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp

Upvotes: 1

Related Questions