How to change the color of a text in a button, where when the cursor is hovered over / clicks on the-CodePudding

I tried other examples from stackoverflow but none of which worked out for me (idk if i'm allowed to share them in the description)

        var offerBTN = document.getElementsByClassName("button");
        var title = document.getElementsById("button_title");
        var subtitle = document.getElementsById("subtitle");

        offerBTN.addEventListener('mouseenter', function () {
            title.style.color = "rgb(170, 170, 170)";
            subtitle.style.color = "rgb(170, 170, 170)";
        })
        offerBTN.addEventListener('mouseup', function () {
            title.style.color = "rgb(170, 170, 170)";
            subtitle.style.color = "rgb(0, 0, 0)";
        })
        offerBTN.addEventListener('mouseleave', function () {
            title.style.color = "rgb(200, 100, 100)";//unselected
            subtitle.style.color = "rgb(100, 200, 100)";
        })
        offerBTN.addEventListener('mousedown', function () {
            title.style.color = "rgb(100, 200, 100)";
            subtitle.style.color = "rgb(100, 100, 200)";//selected
        })

 <button >
            <h3 id="button_title">Job Position 10 ></h3>
            <p id="subtitle">City, Country | Department | Keyword</p>
    </button>

CodePudding user response：

Your code is having 2 mistakes -

You have mispelled getElementById() function. Its not getElementsById().
getElementsByClass() function returns array of target elements. So you cannot write directly offerBTN.addEventListener().

Here is the correct code -

var offerBTN = document.getElementsByClassName("button");
var title = document.getElementById("button_title");
var subtitle = document.getElementById("subtitle");

offerBTN[0].addEventListener('mouseenter', function() {
  title.style.color = "rgb(170, 170, 170)";
  subtitle.style.color = "rgb(170, 170, 170)";
})
offerBTN[0].addEventListener('mouseup', function() {
  title.style.color = "rgb(170, 170, 170)";
  subtitle.style.color = "rgb(0, 0, 0)";
})
offerBTN[0].addEventListener('mouseleave', function() {
  title.style.color = "rgb(200, 100, 100)"; //unselected
  subtitle.style.color = "rgb(100, 200, 100)";
})
offerBTN[0].addEventListener('mousedown', function() {
  title.style.color = "rgb(100, 200, 100)";
  subtitle.style.color = "rgb(100, 100, 200)"; //selected
})

<button >
    <h3 id="button_title">Job Position 10 ></h3>
    <p id="subtitle">City, Country | Department | Keyword</p>
</button>

if you have a single button on which you want to do this thing then I would suggest to use id instead of class.

CodePudding user response：

Maybe you can just add some css like this:

.button:hover {
  color: red;
}

CodePudding user response：

You didn't specify anywhere that you require doing this with Javascript.

If that is in fact the case, I'd suggest using CSS to achieve your desired result.

button:hover #button_title,
button:hover #subtitle {
  color: rgb(170, 170, 170);
}

button:active #button_title {
  color: rgb(100, 200, 100);
}
button:active #subtitle {
  color: rgb(100, 100, 200);
}

// and so on...

<button >
    <h3 id="button_title">Job Position 10 ></h3>
    <p id="subtitle">City, Country | Department | Keyword</p>
</button>

CodePudding user response：

First of all you have a mistake:

It is getElementById not getElementsById

and you can handle with css hover and active selectors.

Or give an id to button :

var offerBTN = document.getElementById("button");
var title = document.getElementById("button_title");
var subtitle = document.getElementById("subtitle");

offerBTN.addEventListener('mouseenter', function () {
    title.style.color = "rgb(170, 170, 170)";
    subtitle.style.color = "rgb(170, 170, 170)";
})
offerBTN.addEventListener('mouseup', function () {
    title.style.color = "rgb(170, 170, 170)";
    subtitle.style.color = "rgb(0, 0, 0)";
})
offerBTN.addEventListener('mouseleave', function () {
    title.style.color = "rgb(200, 100, 100)";//unselected
    subtitle.style.color = "rgb(100, 200, 100)";
})
offerBTN.addEventListener('mousedown', function () {
    title.style.color = "rgb(100, 200, 100)";
    subtitle.style.color = "rgb(100, 100, 200)";//selected
})

<button  id="button">
    <h3 id="button_title">Job Position 10 ></h3>
    <p id="subtitle">City, Country | Department | Keyword</p>
</button>