Search code examples
javascriptdominnerhtmlselectors-apiinnertext

How to pass data into the DOM using querySelector

I'm using querySelectorAll to access id & classes within my index.html file. The problem that I am having is that I'm trying to pass data into my p.source class which has two child spans, and when I use innerText or innerHTML the data isn't being passed into the DOM despite my console log showing the correct data that is meant to be passed into the DOM. Could you help me understand what it is that happening and how I can pass the data into that source class. I'm new to using querySelector and the MDN documentation isn't as quiet in depth as I'd like. Below is my code.

So far by using the console I've tried to access the properties of the childeNodes and they work correctly its just getting that data to be reflected within the DOM

function myQuotes() {
  var quotes = [{
      quote: "Seven billion souls that move around the sun.",
      source: "Childish Gambino",
      citation: "Feels like summer"
    },
    {
      quote: "Don't wait for your world to begin crumbling to make a change.",
      source: "Josh",
      citation: "Past midnight thoughts"
    },
    {
      quote: "The only time we will ever have is right now, no other time exist.",
      source: "Josh",
      citation: "Past midnight thoughts",
      year: 2018
    },
    {
      quote: "Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.",
      source: "Patrick McKenzie",
      citation: "Twitter"

    }
  ];

  console.log('quotes', quotes);

  return quotes;
}

var myQuotesLength = myQuotes().length;
var quotes = myQuotes();

function getRandomQuote(maxNum) {
  var randomNum = Math.floor(Math.random() * maxNum);
  var randomQuote = quotes[randomNum];
  // console.log('random quote', randomQuote );
  return randomQuote;
}



function printQuote() {
  //data call to grab quotes from array of objects
  var message = getRandomQuote(myQuotesLength);
  console.log('message', message);

  //using querySelectors to dynamically pass the data from 'message' into the DOM. Each field works except for sourceField.
  var quoteField = document.querySelectorAll('.quote')[0].innerText = message.quote;
  var source_Parent = document.querySelectorAll('.source');
  console.log('parent', source_Parent);
  var sourceField = source_Parent[0].childNodes[0].innerHTML = message.source;
  console.log('source', sourceField);
  var citationField = source_Parent[0].childNodes[1].innerText = message.citation;
  var yearField = source_Parent[0].childNodes[2].innerText = message.year;
  if (yearField === undefined) {
    yearField = document.getElementsByClassName('year')[0].innerHTML = ' ';
  }
}

document.getElementById('loadQuote').addEventListener("click", printQuote, false);
body {
  background-color: #36b55c;
  color: white;
  font-family: 'Playfair Display', serif;
}

#quote-box {
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;
  width: 80%;
  line-height: .5;
}

.quote {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.1;
  position: relative;
  margin: 0;
}

.quote:before,
.quote:after {
  font-size: 6rem;
  line-height: 2.5rem;
  position: absolute;
}

.quote:before {
  content: "“";
  top: .25em;
  left: -.5em;
}

.quote:after {
  content: "”";
  bottom: -.1em;
  margin-left: .1em;
  position: absolute;
}

.source {
  font-size: 1.25rem;
  ;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: right;
  margin-right: 4em;
}

.source:before {
  content: "—";
}

.citation {
  font-style: italic;
}

.citation:before {
  content: ", ";
  font-style: normal;
}

.year:before {
  content: ", ";
  font-style: normal;
}

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 150px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: #36b55c;
  padding: 15px 0;
  transition: .5s;
}

#loadQuote:hover {
  background-color: rgba(255, 255, 255, .25);
}

#loadQuote:focus {
  outline: none;
}

@media (max-width: 420px) {
  .quote {
    font-size: 2.5rem;
  }
  .quote:before,
  .quote:after {
    font-size: 3rem;
  }
  .source {
    font-size: 1rem;
  }
}
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<div class="container">
  <div id="quote-box">
    <p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
    <p class="source">Patrick McKenzie<span class="citation">Twitter</span><span class="year">2016</span></p>
  </div>
  <button id="loadQuote">Show another quote</button>
</div>

The end result is:

-I'd like to pass the message.quote data into the innerHTML of quote-box id (this works)

-I'd like to pass the message.source data into the innerText of source class (this doesn't work)

-I'd like to pass the message.citation data into the innerText of citation class (this works)

-I'd like to pass the message.year data into the innerText of year class (this works)

Solution

  • You're facing the name as a childNode, but its not a childNode of the .source div, its an innerText. If you put the name into a <span> too, it will became a childNode too and will work like a charm.

    Here is your 'fixed' codepen, where i've just added a <span> around the name: https://codepen.io/anon/pen/pGrBEo?editors=1010#0

    Or take a look at this working example:

    function myQuotes() {
  var quotes = [{
      quote: "Seven billion souls that move around the sun.",
      source: "Childish Gambino",
      citation: "Feels like summer"
    },
    {
      quote: "Don't wait for your world to begin crumbling to make a change.",
      source: "Josh",
      citation: "Past midnight thoughts"
    },
    {
      quote: "The only time we will ever have is right now, no other time exist.",
      source: "Josh",
      citation: "Past midnight thoughts",
      year: 2018
    },
    {
      quote: "Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.",
      source: "Patrick McKenzie",
      citation: "Twitter"

    }
  ];
  return quotes;
}

var myQuotesLength = myQuotes().length;
var quotes = myQuotes();

function getRandomQuote(maxNum) {
  var randomNum = Math.floor(Math.random() * maxNum);
  var randomQuote = quotes[randomNum];
  return randomQuote;
}



function printQuote() {
  var message = getRandomQuote(myQuotesLength);

  var quoteField = document.querySelectorAll('.quote')[0].innerText = message.quote;
  var source_Parent = document.querySelectorAll('.source');
  var sourceField = source_Parent[0].childNodes[0].innerHTML = message.source;
  var citationField = source_Parent[0].childNodes[1].innerText = message.citation;
  var yearField = source_Parent[0].childNodes[2].innerText = message.year;
  if (yearField === undefined) {
    yearField = document.getElementsByClassName('year')[0].innerHTML = ' ';
  }
}

document.getElementById('loadQuote').addEventListener("click", printQuote, false);
    body {
  background-color: #36b55c;
  color: white;
  font-family: 'Playfair Display', serif;
}

#quote-box {
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;
  width: 80%;
  line-height: .5;
}

.quote {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.1;
  position: relative;
  margin: 0;
}

.quote:before,
.quote:after {
  font-size: 6rem;
  line-height: 2.5rem;
  position: absolute;
}

.quote:before {
  content: "“";
  top: .25em;
  left: -.5em;
}

.quote:after {
  content: "”";
  bottom: -.1em;
  margin-left: .1em;
  position: absolute;
}

.source {
  font-size: 1.25rem;
  ;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: right;
  margin-right: 4em;
}

.source:before {
  content: "—";
}

.citation {
  font-style: italic;
}

.citation:before {
  content: ", ";
  font-style: normal;
}

.year:before {
  content: ", ";
  font-style: normal;
}

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 150px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: #36b55c;
  padding: 15px 0;
  transition: .5s;
}

#loadQuote:hover {
  background-color: rgba(255, 255, 255, .25);
}

#loadQuote:focus {
  outline: none;
}

@media (max-width: 420px) {
  .quote {
    font-size: 2.5rem;
  }
  .quote:before,
  .quote:after {
    font-size: 3rem;
  }
  .source {
    font-size: 1rem;
  }
}
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<div class="container">
  <div id="quote-box">
    <p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
    <p class="source"><span>Patrick McKenzie</span><span class="citation">Twitter</span><span class="year">2016</span></p>
  </div>
  <button id="loadQuote">Show another quote</button>
</div>