Zitatgenerator mit Bildern und Text

Question

Ich versuche, einen einfachen Zitatgenerator mit dem spezifischen Bild und dem Text zu verursachen, wenn ich versuche, dieses zu laufen es zeigt mir kein Bild oder irgendeinen Text als die Ausgabe, die es undefined gerade anzeigt Wo gehe ich falsch? Hier ist mein Code:

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

Sie verweisen auf die Variable quote, aber Sie das Radom Zitat auf die Variable item zugeordnet.

Ändern quote.text-item.text Fixes es

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 und quote.img sollte item.text und item.img sein. item enthält das zufällige Objekt von Ihrem Elementarray, während quote die Funktion ist, die Sie ausführen.

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>