CODEWITHSUNDEEP
javascriptjquery
user11321870
user11321870

Reputation:

Change hover color when mouse clicks on button

I tried to change the hover color when the mouse clicks on the button but I got an error via the browser , check below.

The browser result :

VM898 home.php:62 Uncaught TypeError: Cannot read property 'link-privacy-policy' of undefined
    at HTMLAnchorElement.<anonymous> (VM898 home.php:62)
    at HTMLAnchorElement.handle (jquery-3.4.0.js:5707)
    at HTMLAnchorElement.dispatch (jquery-3.4.0.js:5233)
    at HTMLAnchorElement.elemData.handle (jquery-3.4.0.js:5040)

Jquery code

<script>
    let color_count = 0;
    let colors = [{
        "name": "blue",
        "btn-change-color": "#7f8ff4",
        "btn-start": "#7f8ff4",
        "link-privacy-policy": "#7f8ff4"
    },
        {
            "name": "orange",
            "btn-change-color": "#f8d745",
            "btn-start": "#f8d745",
            "link-privacy-policy": "#f8d745"
        }];
    let btnChangeColor = document.getElementsByClassName("btn-change-color");
    let btnStart = document.getElementsByClassName("btn-start");
    let linkPrivacyPolicy = document.getElementsByClassName("link-privacy-policy");
    $(".btn-change-color").click(function () {
        $(btnChangeColor).css("background", colors[color_count]["btn-change-color"]);
        $(btnStart).css("background", colors[color_count]["btn-start"]);
        $(linkPrivacyPolicy).hover(function () {
            $(this).css('color', colors[color_count]["link-privacy-policy"]);
            $(this).css('border-bottom', '1px solid ' + colors[color_count]["link-privacy-policy"]);
        })
        color_count++;
    });
</script>

Note : Line 62 starts with this line :
$(this).css('color', colors[color_count]["link-privacy-policy"]);

Upvotes: 1

Views: 91

Answers (2)

Conan
Conan

Reputation: 319

Hey Here you have a table colors with 2 object and when user click the color_count increment then you should add a condition to fix that:

    $(".btn-change-color").click(function () {
            $(btnChangeColor).css("background", colors[color_count]["btn-change-color"]);
            $(btnStart).css("background", colors[color_count]["btn-start"]);
            $(linkPrivacyPolicy).hover(function () {
                $(this).css('color', colors[color_count]["link-privacy-policy"]);
                $(this).css('border-bottom', '1px solid ' + colors[color_count]["link-privacy-policy"]);
            });
            color_count++;
            //You will add this condition
            if(color_count >= colors.length)
                 color_count = 0;

        });

Upvotes: 0

arthurakay
arthurakay

Reputation: 5651

Deciphering error messages can be confusing sometimes:

 Cannot read property 'link-privacy-policy' of undefined

This effectively means that the following code...

 colors[color_count]["link-privacy-policy"]

...throws an error because colors[color_count] evaluates to undefined -- so naturally that value has no property link-privacy-policy.

@Robin Zigmond's comment (added while I typed this answer) may explain why you're hitting undefined

Upvotes: 1

Related Questions