skip to Main Content

I’m building a random quote machine for Free Code Camp. I need to have one button that produces a random quote and another button that post one of the random quotes to twitter. My random quote button seems to be working fine. I’ve started work on the twitter button but have run into a road block right away. I’m trying to store that value of the “p” element, i.e. the quote, into a variable so I can use it to build the rest of the button. I tried to log the value of the element just to see if it worked but it returns “undefined” whether there is a quote present or not. I’ve tried to manipulate the document.getElementById().value method a bunch of different way but can’t seem to get it to return a string. Any insight into why its only returning undefined would be helpful. Thank You!

This is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Random Quote Machine</title>
  <link rel="stylesheet" style="text/css" href="main.css">
</head>
<body>
  <div class="main-header">
    <h1>Random Quote Machine</h1>
  </div>
  <div class="main-content" id="main-content">
    <p class="text" id="text"></p>
  </div>

  <button type="submit" class="quote-button" id="quote-button">New Quote</button>
  <button type="submit" class="twitter-button" id="twitter-button">Twitter</button>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

This is my Javascript so far

const btn = document.getElementById('quote-button');
const content = document.getElementById('text');
let strValue = document.getElementById('text').value;
const twitter = document.getElementById('twitter-button');

// New Quote Button Event Listener

btn.addEventListener('click', function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en');
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    const quote = data.quoteText + data.quoteAuthor;
    getQuote(quote);

  };

  xhr.send();
});

function getQuote(newQuote) {
  content.textContent = newQuote;
}

// Twitter Button Event Listener

twitter.addEventListener('click', function () {
  console.log(strValue);
});

2

Answers


  1. A p element doesn’t have a value attribute. Try innerHTML…

    Login or Signup to reply.
  2. In my code, I updated the Quote Text and The Author name using a function and used those variables when I wanted to share the tweet.

    Hope that helps!

    HTML:

    <div class= "container">
    
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://static1.squarespace.com/static/5ab008d6697a9880a9f8c364/t/5abc6961aa4a99a0ab790df2/1522693072256/background-for-quotes-5.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Quote of the day!</h5>
        <blockquote class="blockquote mb-0">
        <p id ="quote" class="card-text"></p>
        <p id ="author" class="card-text"></p>
        <button id = "quote_button" type="button" class="btn btn-secondary" >Click me to get a quote</button>
      <a id = "tweet_btn" ><button type="button" class="btn btn-secondary">
    Tweet the quote </button>
    </a> 
      </div>
          </blockquote>
      </div>
    </div>
    
    </div>
    

    JS :

    var jd;
    var currentQuote;
    var currentAuthor;
    
    var data = {
       method: "getQuote", 
       lang: "en" ,
       format:"jsonp",
       dataType: "jsonp"
    };
    
    var texttotweet;
    
    $("#quote_button").on("click", function(){
          // Only change code below this line.
          getthequote(); 
          console.log(currentQuote);
    
          }); 
    
     function getthequote() {
    
      $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", data, function(jd) {
      $('#quote').html('<p>'+ jd.quoteText + '</p>');
      $('#author').html('<p>-' + jd.quoteAuthor + '</p>');
       quotedata(jd.quoteText , jd.quoteAuthor );
       });
     }  
    
    
    
    function quotedata(quote, author ) 
    {
    currentQuote =  quote;
    currentAuthor = author;
    }
    
    
     $('#tweet_btn').on("click", function(){
      $(this).attr("href", "https://twitter.com/intent/tweet?text=" + "The Quote:"  +  currentQuote + ". The Author :" +  currentAuthor );
        console.log("Testing out the code"); 
      });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search