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

Andrew Folts
Andrew Folts
14,238 Points
Posted by Andrew Folts
Andrew Folts
14,238 Points

[Solved]Why is my Javascript string printing literally, not as an HTML element?

I have some code that builds a call-to-action sentence when certain icons are clicked. I'm trying to change the array items in the sentence (Social, Branding, etc) to blue.

I've been playing around with placing "<span>", .InnerHTML, and .html in different places, but the code always ends up displayed literally—ex. "Tell me more about... <span color='#71c0f4'> Social</span> with Foltsy Design Co."

Thoughts on the best way to tackle this? Thanks!

var servicesArray = [];
var interestsH1 = $('#interests');



function interestsConditional() {
if (servicesArray.length > 0) {
        $('#interests').text(interests);
    } else {
        $('#interests').text('Select some Services...');
}
}


function interests() {
    var servicesString = midString(servicesArray);
    var interests = 'Tell me more about... ' + servicesString + ' with Foltsy Design Co.';
    return interests;
}


function clickServicesGrid() {  
    $(document).ready( function() {
                $('#services-grid li').click( function() {
                    $(this).toggleClass('services-grid-click');
                });
            });
}

//Return an array(a) of 1, 2, or 3+ items with AND and COMMAS
function midString(a) { 
    if (a.length === 1) {
        return a;
    } else if (a.length === 2) {
        return a.join(' and ');
    } else {
        return a.slice(0, a.length - 1).join(', ') + ", and " + a.slice(-1);
    }
}

//Store id of clicked element and return p text
function clickInterest() {
    $(document).ready( function() {
        $('#services-grid li').click(function() {
            interestsConditional();


            var id = (this.id);
            var idString = $('#' + id);
            var serviceTitle = idString.text();
            console.log(serviceTitle);
            var index = servicesArray.indexOf(serviceTitle);

            if (index === -1) {
                servicesArray.push(serviceTitle);
                interestsConditional();
                var write = interests();
                interestsH1.text(interests);
            } else if (index > -1) {
                servicesArray.splice(index, 1);
                var write = interests();
                interestsH1.text(interests);
                if (servicesArray.length === 0) {
                    interestsH1.text('Add some services...');
                }
            }
        });
    });
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FOLTSY</title>

<link href="Styles/normalize.css" rel='stylesheet' type='text/css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="Styles/style.css" rel='stylesheet' type='text/css' />
<link href="Styles/responsive.css" rel='stylesheet' type='text/css' />
</head>

<body>
    <!--Fixed header spacing-->
    <div id='head-space'></div>
    <header>
            <!--Mobile menu-->
            <div id='menu-mob' class='body-pad'>
                <ul class='menu-toggle'>
                    <li><a href='#about'>ABOUT</a></li>
                    <li><a href='#work'>WORK</a></li>
                    <li><a href='#services'>SKILLS</a></li>
                    <li><a href='#contact'>CONTACT</a></li>
                </ul>
                <ul id='mobile social'>
                    <li><a target="_blank" href="https://twitter.com/aofolts">
                    <img class='social-mob' src='Icons/af twitter icon 200 160-01.svg'>
                    </a></li>
                    <li><a target="_blank" href="https://www.facebook.com/andrew.folts">
                    <img class='social-mob' src='Icons/af facebook icon 160 80-01.svg'>
                    </a></li>
                    <li><a target="_blank" href="https://www.linkedin.com/in/andrewfolts">
                    <img class='social-mob' src='Icons/af linkedin icon 160 160-01.svg'>
                    </a></li>
                </ul>
            </div>
            <!--Desktop Nav-->
            <nav class='body-pad'>
                <div id='nav-logo'>FOLTSY</div>
                <div id='menu-toggle' class='menu-toggle'>
                    <div id='nav-mob'>Menu</div>
                    <img id='menu-tri' src="Icons/mobile menu triangle-05.svg" />
                    <img id='menu-tri-blue' src='Icons/mobile menu triangle blue-05.svg' />
                </div>
            </nav>
    </header>
    <div id='nav-filter'></div>
    <section id='intro'>
        <div id='intro-wrapper'>
            <div id='intro-content'>
                <h1>Hi, I'm Andrew. <br />
                I'm an independent<br />
                <span id='writer' class='blue-accent'>writer</span> / <span id='designer' class='blue-accent'>designer</span> / <span id='developer' class='blue-accent'>developer</span>.</h1>
                <div class='hr'></div>
                <p>I collaborate with growing companies and<br />small businesses to create brand-building<br />websites and digital content.</p>
            </div>
        </div>
    </section>
    <section>
        <ul id='crafticons-mob' class='ul-flexrow'>    
            <li><img src='Icons/Home/writer icon 80_Papers Mobile.svg'></li>
            <li><img src='Icons/Home/plus icon 20w_PlusvMobile.svg'></li>
            <li><img src="Icons/Home/designer icon 80_Papers Mobile.svg"></li>
            <li><img src='Icons/Home/plus icon 20w_PlusvMobile.svg'></li>
            <li><img src="Icons/Home/developer icon 80_Papers Mobile.svg"></li>
        </ul>
    </section>
    <a name='services' class='anchor-link'></a>
    <section>
        <h1>How can I help?<br />Select services below to<br />start building your project.</h1>
        <ul id='services-grid'>
            <li id='skill-advertising'>
            <img src='Icons/Home/skills advertising icon 80_SkillsMobile.svg' /><p>Advertising</p></li><li 
            id='skill-blogging'>
            <img src='Icons/Home/skills blogs icon 80_SkillsMobile.svg' /><p>Blogging</p></li><li 
            id='skill-branding'>
            <img src='Icons/Home/skills branding icon 80_SkillsMobile.svg' /><p>Branding</p></li><li 
            id='skill-scripts'>
            <img src='Icons/Home/skills scripts icon 80_SkillsMobile.svg' /><p>Scripts</p></li><li 
            id='skill-social'>
            <img src='Icons/Home/skills social icon 80_SkillsMobile.svg' /><p>Social</p></li><li 
            id='skill-websites'>
            <img src='Icons/Home/skills websites icon 80_SkillsMobile.svg' /><p>Websites</p></li>
        </ul>
        <h1 id="interests">Select some Services...</h1>
    </section>
    <script src="js/home script.js"></script>
    <script>
        menuMobToggle();
        clickRotate180();
        navFilter();
        clickServicesGrid();
        clickInterest();
    </script>

    <div id='preloader'>
        <img src="Images/Foltsy-Hero-Home-Writer-03.svg" />
        <img src="Images/Foltsy-Hero-Home-Developer-03.svg" />
        <img src="Images/Foltsy-Hero-Home-Designer-03.svg" />  
    </div>
</body>

</html>
Chyno Deluxe
Chyno Deluxe
16,936 Points

Can you provide the html as well.

Andrew Folts
Andrew Folts
14,238 Points
Andrew Folts
Andrew Folts
14,238 Points

Sure, I dropped it in below.

Andrew Folts
Andrew Folts
14,238 Points
Andrew Folts
Andrew Folts
14,238 Points

Never-mind, I solved it. Just needed to wrap the string in <span> and change .text to .html.

var span = "<span style='color:#71c0f4'>"; var span2 = "</span>" var serviceTitle = span + idString.text() + span2; var index = servicesArray.indexOf(serviceTitle);

        if (index === -1) {
            servicesArray.push(serviceTitle);
            interestsConditional();
            var write = interests();
            interestsH1.html(interests);

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I was just about to ask if you were actually loading jquery - I didn't see that happening in the provided code.

You still have some odd constructs even if they aren't causing problems. In particular, you have several of these:

function something-called-directly-from-html() {
    $(document).ready(function() {
        // stuff you want to happen at load time
    }
}

You might want to get rid of that outer wrapper function (along with the call to it from the HTML), and let $(document).ready do the job alone, as it is typically used. You could also bundle all the things you want to happen at load time inside a single call to $(document).ready.