В приведенном ниже коде

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

1
overexchange 16 Дек 2015 в 04:25

7 ответов

Лучший ответ

Прежде всего вам нужно использовать element.style.backgroundColor вместо element.style.background-color.

Здесь - список JS-эквивалента атрибутов CSS.

Ваша вторая проблема заключается в том, что ваш скрипт выполняется до загрузки <button>, что делает скрипт текущим lastElementChild из body.

Вы можете решить эту проблему, обернув ваш скрипт в 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>
2
Johan Karlsson 16 Дек 2015 в 01:50

Не цвет фона, а цвет фона. Попробуйте и посмотрите, работает ли
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";  
        }
    }
0
yaochiqkl 16 Дек 2015 в 01:34

Ознакомьтесь с моей демонстрацией

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";  
                }
            }
1
Fiido93 16 Дек 2015 в 01:31

Я думаю, что вы должны использовать document.body.lastElementChild.style["background-color"], чтобы установить цвет для элемента

1
dieuvn3b 16 Дек 2015 в 01:39

Вы можете использовать Jquery для назначения или удаления класса CSS, чтобы добавить цвет к вашей кнопке, с помощью этого кода:

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

Функция toggleClass предназначена для добавления и удаления класса css, " другой цвет " - это ваш класс css со стилями для вашей кнопки.

Включите jquery в этот скрипт перед </body> и перед кодом выше:

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

Надеюсь, это вам поможет.

0
Radames E. Hernandez 16 Дек 2015 в 02:13

background-color не является допустимым идентификатором JavaScript. Для установки его с помощью объекта стиля DOM в случае верблюда должно быть backgroundColor.

Дополнительную информацию об объекте стиля DOM можно найти на http://www.w3schools.com/jsref/dom_obj_style.asp

1
PSWai 16 Дек 2015 в 01:30

Вы используете этот код. Работает нормально.

<!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>
0
TechnicalKalsa 16 Дек 2015 в 01:47