Random quote adding API issue

Dear fellows

During the quote project I have been trying to add the quote API but I wasn’t able to sort it out.

I would appreciate if anybody could assist me.

HTML code

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />

<div class = "well messagee">
  <p id="mytext">The message will go here</p>
  <button class="btn btn-primary" id="getMessage">
  new quote
</button>
    </div>

CSS code


.messagee
{
  position: fixed;
    bottom: 50%;
    right: 50%;
    width: 300px;
  font-family:Lobster;
  font-size:150%;
  background-color:white;
}
.btn
{
  position:relative;
}

javascript code

 
function randColor()
{
  return "RGB("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
}


 

}
$(document).ready(function() {
  var y =randColor();
  $("body").css("background-color", y);
  $("#mytext").css("color", y);
  $("#getMessage").click(function() {
    var x=randColor();
     $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback", function(json) {
  $("#mytext").html(JSON.stringify(json));
 
    $("body").animate({
      backgroundColor: x
    },1000);
    
   
    $("#mytext").animate(
    {
  
      color:x
    },1000);
  });
});

I want to change the message will go here text to quote whenever the new quote button is clicked

This will turn an entire JavaScript object into a string, and I don’t think it’s what you want. Check the output in your browser’s console with console.log(json).