画像とテキストのジェネレータを引用してください

Question

私は簡単な引用符ジェネレータを作成しようとしています特定の画像とテキストを使用していますが、これを実行しようとすると画像やテキストが表示されません。undefined 、どこが間違っていますか？ここに私のコードは次のとおりです。

function quote() { 
 
    var items = [ 
 
    { img: "http://quotes.values.com/quote_artwork/5909/original/20170321_tuesday_quote.jpg?1489784779", 
 
    text: 
 
    "It is the province of knowledge to speak and it is the privilege of wisdom to listen. -Oliver Wendell Holmes, Sr." 
 
    },  
 
    { img: "http://quotes.values.com/quote_artwork/7412/original/20151105_thursday_quote.jpg?1446154661", 
 
    text:"Let me not pray to be sheltered from dangers, but to be fearless in facing them.Let me not beg for the stilling of my pain, but for the heart to conquer it.-Rabindranath Tagore" 
 
    }, 
 
    { img:"http://quotes.values.com/quote_artwork/7473/original/20160126_wednesday_quote.jpg?1453410934", 
 
    text:"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience.-Eleanor Roosevelt"}, 
 
    { img:"http://quotes.values.com/quote_artwork/7439/original/20151214_monday_quote.jpg?1449869454", 
 
    text :"At the touch of love everyone becomes a poet. -Plato "} 
 
    
 
    ]; 
 

 
    var item = items[Math.floor(Math.random()*items.length)]; 
 

 
    document.getElementById("demo").innerHTML =   
 
    '<p>' + quote.text + '</p>' + 
 
     '<img src="' + quote.img + '">'; 
 
    
 
}

#gen { 
 
    outline: none; 
 
    padding-top: 5px; 
 
    text-decoration: none; 
 
    opacity: 0.6; 
 
    background-color: black; 
 
    color: white; 
 
    border: thin solid white; 
 
    height: 40px; 
 
    width: 100px; 
 
    border-radius: 10px; 
 
    transition: 0.5s; 
 
} 
 
#gen:hover { 
 
    background-color: white; 
 
    color: black; 
 
    border: thin solid black; 
 
    opacity: 0.8; 
 
}

<div class="page-header"> 
 
    <p><h1>Simple Quote Generator </h1></p> 
 
    </div> 
 

 
    
 
<div class=""> 
 
    <button id="gen" onclick="quote()" type="button" class="button-0">New Quote</button> 
 
     <div style="padding: 10px"></div> 
 
    <div class=""> 
 
    <div class="panel-body" id="demo"></div>  
 
    </div> 
 
</div>

Answer 1

あなたは、変数quoteを参照されますが、変数itemにラドムの引用を割り当てます。

変更quote.textitem.textに修正それ

function quote() { 
 
    var items = [ 
 
    { img: "http://quotes.values.com/quote_artwork/5909/original/20170321_tuesday_quote.jpg?1489784779", 
 
    text: 
 
    "It is the province of knowledge to speak and it is the privilege of wisdom to listen. -Oliver Wendell Holmes, Sr." 
 
    },  
 
    { img: "http://quotes.values.com/quote_artwork/7412/original/20151105_thursday_quote.jpg?1446154661", 
 
    text:"Let me not pray to be sheltered from dangers, but to be fearless in facing them.Let me not beg for the stilling of my pain, but for the heart to conquer it.-Rabindranath Tagore" 
 
    }, 
 
    { img:"http://quotes.values.com/quote_artwork/7473/original/20160126_wednesday_quote.jpg?1453410934", 
 
    text:"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience.-Eleanor Roosevelt"}, 
 
    { img:"http://quotes.values.com/quote_artwork/7439/original/20151214_monday_quote.jpg?1449869454", 
 
    text :"At the touch of love everyone becomes a poet. -Plato "} 
 
    
 
    ]; 
 

 
    var item = items[Math.floor(Math.random()*items.length)]; 
 

 
    document.getElementById("demo").innerHTML =   
 
    '<p>' + item.text + '</p>' + 
 
     '<img src="' + item.img + '">'; 
 
    
 
}

#gen { 
 
    outline: none; 
 
    padding-top: 5px; 
 
    text-decoration: none; 
 
    opacity: 0.6; 
 
    background-color: black; 
 
    color: white; 
 
    border: thin solid white; 
 
    height: 40px; 
 
    width: 100px; 
 
    border-radius: 10px; 
 
    transition: 0.5s; 
 
} 
 
#gen:hover { 
 
    background-color: white; 
 
    color: black; 
 
    border: thin solid black; 
 
    opacity: 0.8; 
 
}

<div class="page-header"> 
 
    <p><h1>Simple Quote Generator </h1></p> 
 
    </div> 
 

 
    
 
<div class=""> 
 
    <button id="gen" onclick="quote()" type="button" class="button-0">New Quote</button> 
 
     <div style="padding: 10px"></div> 
 
    <div class=""> 
 
    <div class="panel-body" id="demo"></div>  
 
    </div> 
 
</div>

Answer 2

quote.textとquote.imgはitem.textとitem.imgでなければなりません。 itemにはアイテム配列のランダムオブジェクトが含まれていますが、quoteは実行中の関数です。

function quote() { 
 
    var items = [ 
 
    { img: "http://quotes.values.com/quote_artwork/5909/original/20170321_tuesday_quote.jpg?1489784779", 
 
    text: 
 
    "It is the province of knowledge to speak and it is the privilege of wisdom to listen. -Oliver Wendell Holmes, Sr." 
 
    },  
 
    { img: "http://quotes.values.com/quote_artwork/7412/original/20151105_thursday_quote.jpg?1446154661", 
 
    text:"Let me not pray to be sheltered from dangers, but to be fearless in facing them.Let me not beg for the stilling of my pain, but for the heart to conquer it.-Rabindranath Tagore" 
 
    }, 
 
    { img:"http://quotes.values.com/quote_artwork/7473/original/20160126_wednesday_quote.jpg?1453410934", 
 
    text:"The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience.-Eleanor Roosevelt"}, 
 
    { img:"http://quotes.values.com/quote_artwork/7439/original/20151214_monday_quote.jpg?1449869454", 
 
    text :"At the touch of love everyone becomes a poet. -Plato "} 
 
    
 
    ]; 
 

 
    var item = items[Math.floor(Math.random()*items.length)]; 
 

 
    document.getElementById("demo").innerHTML =   
 
    '<p>' + item.text + '</p>' + 
 
     '<img src="' + item.img + '">'; 
 
    
 
}

#gen { 
 
    outline: none; 
 
    padding-top: 5px; 
 
    text-decoration: none; 
 
    opacity: 0.6; 
 
    background-color: black; 
 
    color: white; 
 
    border: thin solid white; 
 
    height: 40px; 
 
    width: 100px; 
 
    border-radius: 10px; 
 
    transition: 0.5s; 
 
} 
 
#gen:hover { 
 
    background-color: white; 
 
    color: black; 
 
    border: thin solid black; 
 
    opacity: 0.8; 
 
}

<div class="page-header"> 
 
    <p><h1>Simple Quote Generator </h1></p> 
 
    </div> 
 

 
    
 
<div class=""> 
 
    <button id="gen" onclick="quote()" type="button" class="button-0">New Quote</button> 
 
     <div style="padding: 10px"></div> 
 
    <div class=""> 
 
    <div class="panel-body" id="demo"></div>  
 
    </div> 
 
</div>