using javascript to dynamically insert text with styles

Question

I am working on a small little text box that will actively display different text without reloading the page. I use javascript to insert paragraphs of text based of which link the user clicks on. It works, however, i want to also insert style attributes to the dynamically inserted content. I want to do this because the background of the div is going to be black.

Here is my JS

    function navClicked(x){

        //alert("function activated");
        //alert(x);
        if (x == "aboutButton"){
            //alert("About Button");
            document.getElementById('information').innerHTML = "About Click";
        }
        else if(x == "faqButton"){
            //alert("FAQ Button");
            document.getElementById('information').innerHTML = "FAQ Click";
        }
        else if(x == "servicesButton"){
            //alert("Services Button");
            document.getElementById('information').innerHTML = "Services Click";
        }
        else{
            //alert("Contact Button");
            document.getElementById('information').innerHTML = "Contact Click";
        }
    }

Here is the html that goes with it

<body>
        <div id="navigation">
            <table cellpadding="5">
                <tr>
                    <td>
                        <a onClick="navClicked('aboutButton');" style="cursor: pointer; cursor: hand;">ABOUT ATS</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('faqButton');" style="cursor: pointer; cursor: hand;">FAQ</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('servicesButton');" style="cursor: pointer; cursor: hand;">SERVICES</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('contactButton');" style="cursor: pointer; cursor: hand;">CONTACT</a>
                    </td>
                </tr>               
            </table>
        </div>
        <div id="information">
            <p>
                content
            </p>
        </div>
    </body>

and finally the CSS

<style>
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    p
    {
    color:white;
    }

    #navigation
    {   
        height:145px;
        float:left;
        width:155px;
        background:grey;
    }
    #navigation table
    {
        margin-left:auto;
        margin-right:auto;
        color:white;
    }

    #information
    {
        height:145px;
        float:left;
        width:290px;
        background:black;
    }
</style>

The final products works. However, whenever new text gets inserted to the box, it becomes black. And then you cannot read the text.

Here is a jsFiddle http://jsfiddle.net/9xahg/

although it doesnt work in fiddle and im not sure why. But regardless, it works as intended in all browsers with the exception that you cannot read the new text.

How can I fix this?

Guicara · Accepted Answer · 2013-03-02 21:48:54Z

1

Just add "color: white;" in #information CSS statement:

#information
{
    height:145px;
    float:left;
    width:290px;
    background:black;
    color: white;
}

And it's work ;)

answered Mar 2, 2013 at 21:48

Guicara

1,6982 gold badges21 silver badges34 bronze badges

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

1 Comment

onTheInternet Over a year ago

haha should have figured it was something obvious like that. Thank you very much =)

JohnMalkowich · Accepted Answer · 2013-03-02 21:47:19Z

1

try adding

color: white;

to #information instead

it is because i have styled p elements with that and you dont print out a p element when you write the new text...

either that or you could also put a p element in when writing text:

document.getElementById('information').innerHTML = "<p>About Click</p>";

answered Mar 2, 2013 at 21:47

JohnMalkowich

2983 silver badges14 bronze badges

Comments

user1781710 · Accepted Answer · 2013-03-02 21:45:50Z

0

JQuery was made exactly for this so you could refer to HTML elements the same as you would in CSS. I'd highly advise you to use jQuery if you want to style elements using JavaScript. It'll pay off in the long run in time savings. Once you have it there is a specific .css() function to help you.

answered Mar 2, 2013 at 21:45

user1781710

Collectives™ on Stack Overflow

using javascript to dynamically insert text with styles

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related