私のJSコードここで私はdiv要素でJavaScriptの配列は、それをHTMLと表示するように変換する必要がHTML

Question

に最後htmlで=オペレータ用

JS

$(document).ready(function(){ 
    $("#getQuotes").on("click", function(){ 
    var index = Math.floor(Math.random() * (quotes.length)); 
    var html = "<h6> " + quotes[index].author + "</h6> <br>"; 
    html = "<h1>" + quotes[index].quote + "</h1>"; 

    $("#display").html(html); 
    }); 
}); 

// Js object of some famous quotes 
var quotes = [ 
    { 
     "quote": "Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.", 
     "author": "—Sherlock Holmes" 
    }, 
    { 
     "quote" : "You can do anything, but not everything.", 
     "author" : "—David Allen" 
    }, 
    { 
     "quote" : "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.", 
     "author" : "—Antoine de Saint-Exupéry" 
    }, 
    { 
     "quote" : "The richest man is not he who has the most, but he who needs the least.", 
     "author" : "—Unknown Author" 
    }, 
    { 
     "quote" : "You miss 100 percent of the shots you never take.", 
     "author" : "—Wayne Gretzky" 
    }, 
    { 
     "quote" : " Courage is not the absence of fear, but rather the judgement that something else is more important than fear.", 
     "author" : "—Ambrose Redmoon" 
    }, 
    { 
     "quote" : "You must be the change you wish to see in the world.", 
     "author" : "—Gandhi" 
    }, 
    { 
     "quote" : " To the man who only has a hammer, everything he encounters begins to look like a nail.", 
     "author" : "—Abraham Maslow" 
    }, 
    { 
     "quote" : "We are what we repeatedly do; excellence, then, is not an act but a habit.", 
     "author" : "—Aristotle" 
    }, 
    { 
     "quote" : "Do not seek to follow in the footsteps of the men of old; seek what they sought.", 
     "author" : "—Basho" 
    }, 
    { 
     "quote" : "A wise man gets more use from his enemies than a fool from his friends.", 
     "author" : "—Baltasar Gracian" 
    }, 
    { 
     "quote" : "Always forgive your enemies; nothing annoys them so much.", 
     "author" : "—Oscar Wilde" 
    } 
    ]; 

Answer 1

htmlコード：

<button id="getQuotes">get quotes</button> 
<div id="display"></div> 

jqueryCode：

$(document).ready(function(){ 
    $("#getQuotes").on("click", function(){ 
    var index = Math.floor(Math.random() * (quotes.length)); 
    for(var i = 0; i<=index; i++){ 
    var html = "<h6> " + quotes[i].author + "</h6> <br>"; 
    html += "<h1>" + quotes[i].quote + "</h1>"; 
    } 
    $("#display").html(html); 
    }); 
}); 

あなたはこのようにしようとします。 https://jsfiddle.net/yu799cdz/

Answer 2

代替+=オペレータをJavaScriptオブジェクトに変換代わりにhtml変数

$(document).ready(function(){ 
 
    $("#getQuotes").on("click", function(){ 
 
    var index = Math.floor(Math.random() * (quotes.length)); 
 
    var html = "<h6> " + quotes[index].author + "</h6> <br>"; 
 
    html += "<h1>" + quotes[index].quote + "</h1>"; 
 

 
    $("#display").html(html); 
 
    }); 
 
}); 
 

 
// Js object of some famous quotes 
 
var quotes = [ 
 
    { 
 
     "quote": "Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.", 
 
     "author": "—Sherlock Holmes" 
 
    }, 
 
    { 
 
     "quote" : "You can do anything, but not everything.", 
 
     "author" : "—David Allen" 
 
    }, 
 
    { 
 
     "quote" : "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.", 
 
     "author" : "—Antoine de Saint-Exupéry" 
 
    }, 
 
    { 
 
     "quote" : "The richest man is not he who has the most, but he who needs the least.", 
 
     "author" : "—Unknown Author" 
 
    }, 
 
    { 
 
     "quote" : "You miss 100 percent of the shots you never take.", 
 
     "author" : "—Wayne Gretzky" 
 
    }, 
 
    { 
 
     "quote" : " Courage is not the absence of fear, but rather the judgement that something else is more important than fear.", 
 
     "author" : "—Ambrose Redmoon" 
 
    }, 
 
    { 
 
     "quote" : "You must be the change you wish to see in the world.", 
 
     "author" : "—Gandhi" 
 
    }, 
 
    { 
 
     "quote" : " To the man who only has a hammer, everything he encounters begins to look like a nail.", 
 
     "author" : "—Abraham Maslow" 
 
    }, 
 
    { 
 
     "quote" : "We are what we repeatedly do; excellence, then, is not an act but a habit.", 
 
     "author" : "—Aristotle" 
 
    }, 
 
    { 
 
     "quote" : "Do not seek to follow in the footsteps of the men of old; seek what they sought.", 
 
     "author" : "—Basho" 
 
    }, 
 
    { 
 
     "quote" : "A wise man gets more use from his enemies than a fool from his friends.", 
 
     "author" : "—Baltasar Gracian" 
 
    }, 
 
    { 
 
     "quote" : "Always forgive your enemies; nothing annoys them so much.", 
 
     "author" : "—Oscar Wilde" 
 
    } 
 
    ];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="getQuotes">get quotes</div> 
 
<div id="display"></div>

を上書きするの "<h1>" + quotes[index].quote + "</h1>"を連結するために割り当て