Append string from array to div on mouseenter

Question

I have two buttons that change color when hovered over. They are both titled employer and employee. I have a Div below them that I want to change text accordingly when one is hovered. I dont want the text to be removed unless the other button is hovered over.

The color change works but it doesnt insert the text in the array. Is their something wrong with my syntax?

How can I achieve this?

Fiddle of what I have

JQUERY

    $(document).ready(function () {

        var pigText = new Array("Employee INFO", "Employer INFO");
        //Button Color Change
        $("#employerButton").mouseenter(function () {
            $("#employerButton").css("background-color", "#989898");
            $("#employeeButton").css("background-color", "#6EBE44");
            $("pigText[1]").appendTo("#pigTextHolder");
        });


        $("#employeeButton").mouseenter(function () {
            $("#employeeButton").css("background-color", "#989898");
            $("#employerButton").css("background-color", "#6EBE44");
            $("pigText[0]").appendTo("#pigTextHolder");
        });


    });

HTML

<div class="d1-d2 greenSideBar" id="leftGreenSideBar" >

</div>
<div class="d3-d6 m1" id="employerButton">
    <p>Employer</p>
</div>
<div class="d7-d10 m1" id="employeeButton">
    <p>Employees</p>
</div>
<div class="d11-d12 greenSideBar" id="rightGreenSideBar">

</div>

<!--BREAK-->  
<div class="d-all m1" id="coingBackground">
    <h2>Welcome to Payday</h2>
    <img src="images/the_pig_payday.png" alt="The Pig" />
    <div id="pigTextHolder">
        <p>Just some random crap about a boy... and his pet pig. Dont let it frighten you. Babes cousin isnt out for revenge. Just closure. BLAH BLAH BLAH BLAH </p>
    </div>
</div>

Guffa · Accepted Answer · 2014-05-15 19:15:39Z

1

You are using quotes around the expressions that accesses the array, so they are not interpreted as expressions, but as strings.

Also, you probably want to replace the text in the element, not add more text:

$("#pigTextHolder").text(pigText[1]);

Demo: http://jsfiddle.net/Guffa/paeM3/2/

answered May 15, 2014 at 19:15

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

onTheInternet Over a year ago

Great answer thanks. Is there anyway to add a <p></p> tag to the output so that I can style the output with CSS?

Guffa Over a year ago

@onTheInternet: If you want HTML code in the content, use the html method instead of the text method.

T McKeown · Accepted Answer · 2014-05-15 19:13:36Z

1

You want to change:

$("pigText[1]").appendTo("#pigTextHolder");

To:

$("#pigTextHolder").html( $("#pigTextHolder").html() + $(pigText[1]));

Or:

$("#pigTextHolder").append(pigText[1]);

answered May 15, 2014 at 19:13

T McKeown

12.9k1 gold badge27 silver badges35 bronze badges

3 Comments

onTheInternet Over a year ago

Could you update my fiddle? I tried this and it didnt work for some reason.

T McKeown Over a year ago

try now... my answer was jacked.

T McKeown Over a year ago

i just tested, $("#pigTextHolder").append(pigText[0]); works fine.

Jai · Accepted Answer · 2014-05-15 19:15:00Z

1

You can use .append() here:

$("#pigTextHolder").append(pigText[1]);
$("#pigTextHolder").append(pigText[0]);

answered May 15, 2014 at 19:15

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Karthik Ganesan · Accepted Answer · 2014-05-15 19:18:44Z

1

use

$("#pigTextHolder").html(pigText[1]);

and

$("#pigTextHolder").html(pigText[0]);

respectively

answered May 15, 2014 at 19:18

Karthik Ganesan

4,2622 gold badges28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Append string from array to div on mouseenter

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related