CODEWITHSUNDEEP
javascripthtmlbutton
rjc810
rjc810

Reputation: 495

hovering over buttons animation in js

In js, I would like to make it so that a universal "hover on/off" function is called whenever a user hovers over a button. However, I have two types of buttons:

<body>
    <main>
        <section class="landing">
            <nav id="navbar">
                <h2 id="logo">
                    <button onclick="location.href='link'" 
                    onmouseover="onbutton(this)" onmouseout="offbutton(this)"
                    type="button">GitHub</button>
                </h2>
    ...

and

div class="projects" id=#projects>
        <h2>My Projects</h2>

        <article class="project-elem">
            <div class="project-n js-scroll" id="dictocounter">

                <a href="link"><button
                onmouseover="onbutton(this)" onmouseout="offbutton(this)"
                type="button">Dictation Counter</button></a>
    ...

Now, I would like hovering over the first button to change its color to #DDCDE8, and hovering over the second to change its color to red, so I create the following functions in js:

function onbutton(x){
    (x.classList.contains("landing")) ? x.style.color = "#DDCDE8" : x.style.color = "red";
}

function offbutton(x){
    x.style.color = "black";
}

Yet, hovering over any button immediately changes its color to red, even though the first button is enclosed in a class called landing.

Upvotes: 0

Views: 71

Answers (1)

user4308987
user4308987

Reputation:

You need to actually add the class="landing" for the js to find it

function onbutton(x){
    (x.classList.contains("landing")) ? x.style.color = "#DDCDE8" : x.style.color = "red";
}

function offbutton(x){
    x.style.color = "black";
}
<body>
    <main>
        <section class="landing">
            <nav id="navbar">
                <h2 id="logo">
                    <button onclick="location.href='link'" 
                    onmouseover="onbutton(this)" onmouseout="offbutton(this)" class="landing"
                    type="button">GitHub</button>
                </h2>
    div class="projects" id=#projects>
        <h2>My Projects</h2>

        <article class="project-elem">
            <div class="project-n js-scroll" id="dictocounter">

                <a href="link"><button
                onmouseover="onbutton(this)" onmouseout="offbutton(this)"
                type="button">Dictation Counter</button></a>

Upvotes: 1

Related Questions