Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Change background colour of a textarea with jQuery

Bit of a new year challenge for you all... it certainly is for me. ;)

I have a HTML form and some jquery. I have the 2 input boxes working perfectly, in that they change the background colour and text... but for the life of me, I cannot understand why it has no effect on the textarea.

I've been at this for at leaat an hour and a half. And scoured the jquery Documentation and Google. Help meeee :)

<form action="" method="">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan enim purus, a suscipit magna consectetur id. Etiam faucibus, libero ac vehicula convallis, massa erat congue arcu</p>

        <label for="lab1" class="">Name: </label>

        <input type = "text" name="lab1" id="lab1" placeholder="Enter your name: " />

        <p></p>

        <label for="lab2" class="">Email: </label>

        <input type = "text" name="lab2" id="lab2" placeholder="Enter your email address: " />

        <p></p>

        <label for="lab3" class="">Request: </label>

        <textarea name="lab3" id="lab3" value="Request" placeholder="Write your request here!"></textarea>

        <p></p>

    <label for="send" class="">Send: </label>

        <p></p>

        <input type = "submit" id="send" value="Send away!" />
        <input type = "reset" id = "reset" value="Reset" />

    </form>

//Form Styles
$("input[placeholder]").on("hover", function() {
    $( this ).css("background", "red");
    $( this ).css("color", "yellow");  
});

$("textarea#lab3").on("click", function(){
   $(this).css("background-color", "yellow");

});

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Jonathan! Interesting results. And I say this because the textarea changing to yellow works beautifully for me in Chrome, Edge, and Firefox. However, the other two don't work at all. It makes me wonder if it's something specific to the version of jQuery you're using or the browser.

edited for additional information and possible solution

That being said, I just tried something and it made all of it work. To be clear, I'm using jQuery 3.2.1.

I changed the hover function to look like this:

$("input[placeholder]").hover(function() {
    $( this ).css("background", "red");
    $( this ).css("color", "yellow");  
});

Hope this helps! :sparkles:

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

That's a fair point, but the methods I'm using were introduced early on... and looking at the project I'm using jQuery 3.1.1.

That said, I've just updated the link to 3.2.1 and the same results.

Here's a link to the up to date project. https://projects.jonniegrieve.co.uk/php-cookbook/

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

And yet, when I go to that website and go under request, I get the exact same results I originally got. The textarea turns yellow and the inputs do nothing.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It seems at the moment I can only get one or the other behaviour! :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Solved for now.

2 things happened here. My localhost didn't seem to be updating to my version on server which is why I seemed to be getting different browser behaviours.

And I seem to be learning that hover functionality doesn't seem to work with the jquery on() method. :-)