Question

我试图创建一个简单的引用生成器使用特定的图像和文本，当我尝试运行它时，它不显示任何图像或任何文本作为它只显示的输出undefined我哪里错了？这是我的代码：

＆＃13;

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 + '">';
  
}

＆＃13;

#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;
}

＆＃13;

   <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>

＆＃13;

Answer 1

quote.text和quote.img应为item.text和item.img。 item包含items数组中的随机对象，而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>

Answer 2

您正在引用变量quote，但您已将radom引用分配给变量item。

将quote.text更改为item.text会修复它

＆＃13;

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 + '">';
  
}

＆＃13;

#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;
}

＆＃13;

   <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>

＆＃13;

Answer 3

function quote() {
  var items = [
    { img: "unsplash.it/1080/1080/?random",
     text: 
     "It is the province of knowledge to speak and it is the privilege of wisdom to listen. -Oliver Wendell Holmes, Sr."
    },    
    { img: "unsplash.it/1080/1080/?random",
     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:"unsplash.it/1080/1080/?random",
     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:"unsplash.it/1080/1080/?random",
     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>

引用生成器与图像和文本

3 个答案: