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

Posted by Ben Johnson
.a{fill-rule:evenodd;}techdegree
Ben Johnson
Full Stack JavaScript Techdegree Student 6,936 Points

Accessing 'document.getElementsByClassName'

I'm trying to set the innerHTML of two span classes but can't get it to work. My HTML is as follows:

<div class="container">
    <div id="quote-box">
      <p class="quote"></p>
      <p class="source"><span class="citation"></span><span class="year"></span></p>
    </div>
    <button id="loadQuote">Show another quote</button>
  </div>

My JavaScript is as follows

//set the innerHTML of <span class="year">
document.getElementsByClassName("year")[0].innerHTML = year;
//set the innerHTML of <span class="citation">
document.getElementsByClassName("citation")[0].innerHTML = citation

How can I set the innerHTML of these classes? Thanks.

Fraser Graham
Fraser Graham
9,903 Points

Your JS should work. Can you share how you are defining the "year" and "citation" variables?

Jacob Mishkin
Jacob Mishkin
23,118 Points

Can you please format your code. To do this, edit your post and look under the markdown cheatsheet, there you will find instructions on how to do this.

2 Answers

Ben Johnson
seal-mask
.a{fill-rule:evenodd;}techdegree
Ben Johnson
Full Stack JavaScript Techdegree Student 6,936 Points
Ben Johnson
.a{fill-rule:evenodd;}techdegree
Ben Johnson
Full Stack JavaScript Techdegree Student 6,936 Points

Thanks for the replies. I've formatted the question.

The variables are coming from an object and are being defined like this:

var citation = `${toQuote.citation}`;
var year = `${toQuote.year}`;

The whole JavaScript file is this:

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

let quotes = [
    {saying: "The best preparation for tomorrow is doing your best today.", author: "H. Jackson Brown, Jr.", citation: "brainyquote.com", year: 1987},
    {saying: "I can't change the direction of the wind, but I can always adjust my sails to reach my destination", author: "Jimmy Dean", citation: "brainyquote.com", year: 1956},
    {saying: "Change your thoughts and you change your world", author: "Norman Vincent Peale", citation: "brainyquote.com", year: 1973},
    {saying: "Try to be a rainbow in someones cloud", author: "Maya Angelou", citation: "brainyquote.com", year: 2011},
    {saying: "If an opportunity doesn't knock, build a door", author: "Milton Berle", citation: "brainyquote.com", year: 1962},
];

let getRandomQuote = () => {

    shuffle = (array) => {
        let finalArray = [];
        let droppedArray = [];
        while (array.length > 0) {
            var random = Math.floor(Math.random() * array.length);
            var randomValue = array[random];
            var dropped = array.splice(random, 1);
            droppedArray.push(dropped)
            finalArray.push(randomValue);
        }
        return finalArray;
    }
    if (quotes.length == 0) {
        let d = new Date();
        let n = d.getFullYear()
        return {
            saying: "That's all folks",
            author: "Ben",
            year: n
        }
    }
    quotes = shuffle(quotes);
    let theQuote = quotes.pop();
    return theQuote;
}

function printQuote(theQuote) { 
    var toQuote = getRandomQuote();

    //var totalHTML = `${toQuote.saying} ${toQuote.author} ${toQuote.citation} ${toQuote.year}`

    var saying = `${toQuote.saying}`;
    var author = `${toQuote.author}`;
    var citation = `${toQuote.citation}`;
    var year = `${toQuote.year}`;


    document.getElementsByTagName("p")[0].innerHTML = saying;
    document.getElementsByTagName("p")[1].innerHTML = author;

    x = document.getElementsByClassName;
    for (var i = 0; i < x; i++) {

    }
}

setInterval(printQuote, 5000);
Jacob Mishkin
Jacob Mishkin
23,118 Points

I'm not 100% sure as to what you mean. Are you saying that the HTML is being generated the object toQuote? Also I don't believe you need to have the $ before your object, I'm not sure if that is an ECMA6 thing or not, I'm not sure. If the idea is jQuery you do not need the $ signs.

Jacob Mishkin
Jacob Mishkin
23,118 Points

What you need to do is by start adding console.log() to your code in order to find where the issues are. The only thing I see off hand is an empty for loop.

Fraser Graham
Fraser Graham
9,903 Points
Fraser Graham
Fraser Graham
9,903 Points

I copy/pasted your HTML inspect on this window and used the Chrome dev tools console for the JS, all worked for me (pressing the button resulted in a new quote).