javascript - 尝试使用我的随机报价生成器添加我的报价作者的图像，但不知道如何去做
问题描述
当我单击随机按钮生成器时，我已经添加了 html 标记，用于显示我的图像的位置。这是我的代码其余部分的链接：https ://codepen.io/noblegas/pen/bGbPJGV?fbclid=IwAR306VPNKvbRFshCEdY2DLlcsZEIycXWB_NUKtEWqijkTMUu1X0A54Ori5E
重申一下，我希望每次单击随机引用的按钮时，也会出现写该引用的作者的照片。对于那些已经点击了我的代码的 codepen 链接的人，我应该在我的引号数组中添加一个图像键值吗？'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>Display Quotes</title>
<style>
.max-height {
min-height: 100vh;
}
body {
background: #b09e99;
}
.quote-container {
background: rgba(255, 255, 255, 0.5);
}
#generate-btn {
color: white !important;
background: #64b6ac !important;
border-color: #64b6ac !important;
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
#generate-btn:hover {
background: #b09e99 !important;
border-color: #b09e99 !important;
color: #333333 !important;
}
.author {
color: #64b6ac;
}
</style>
</head>
<body>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-11 mx-auto col-md-6 quote-container p-5">
<button class="btn-outline-primary text-capitalize my-4 d-block mx-auto" id="generate-btn">generate quote</button>
<h3 class="text-muted">
<span class="quote-icon mr-3">
<i class="fas fa-quote-left fa-3x"></i>
<span id="quote">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos quasi ad aliquid? Iusto cumque maiores atque, enim eos autem quasi.</span>
</span>
</h3>
<h5 class="text-right text-capitalize author">
<span class="quote-author ml-3">
author
</span>
</h5>
<span class="quote-image-l3">
<img src="" class="img-fluid" alt="">
where image will go
</span>
</div>
</div>
</div>
<!-- jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="js/app.js">
//immediate invoked function expression
//immediate invoked function expression
(function(){
const quotes=[
{
quote:"It is, in fact, nothing short of a miracle that the modern methods of education have not yet entirely strangled the holy curiosity of inquiry; for this delicate plant, aside from stimulation, stands mainly in need of freedom; without this it goes to wrack and ruin without fail. It is a very grave mistake to think that the enjoyment of seeing and searching can be promoted by means of coercion and a sense of duty.",
author: "Albert Einstein",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote:"Knowledge that is acquired under compulsion obtains no hold on the mind.",
author: "Plato",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"},
{
quote:"Reward and punishment is the lowest form of education.",
author: "Chuang Tzu",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote:"Education consists mainly in what we have unlearned.",
author: "Mark Twain",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote:"I have nevere let my schooling interfere with my education",
author: "Mark Twain",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote:"The whole theory of modern education is radically unsound. Fortunately in England, at any rate, education produces no effect whatsoever. If it did, it would prove a serious danger to the upper classes, and probably lead to acts of violence.",
author: "Oscar Wilde",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is an admirable thing, but it is well to remember from time to time that nothing that is worth knowing can be taught.",
author: "Oscar Wilde",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I loathed every day and regret every moment I spent in a school..",
author: "Wood Allen",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I hated school. Even to this day, when I see a school bus it's just depressing to me. The poor little kids.",
author: "Dolly Parton",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"There is nothing on earth intended for innocent people so horrible as a school.",
author: "George Bernard Shaw",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"What we call education and culture is for the most part nothing but the substitution of reading for experience, of literature for life, of the obsolete fictitious for the contemporary real.",
author: "George Bernard Shaw",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"What does education often do? It makes a straight-cut ditch of a free, meandering brook.",
author: "Henry David Thoreau",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"How could youths better learn to live than by at once trying the experiment of living?",
author: "Henry David Thoreau",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Men are born ignorant, not stupid; they are made stupid by education.",
author: "Bertrand Russell",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is one of the chief obstacles to intelligence and freedom of thought.",
author: "Bertrand Russell",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"He was so learned that he could name a horse in nine languages; so ignorant that he bought a cow to ride on.",
author: "Benjamin Franklin",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"The average schoolmaster is and always must be essentially an ass, for how can one imagine an intelligent man engaging in so puerile an avocation.",
author: "H.L. Mencken",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is a weapon, whose effect depends on who holds it in his hands and at whom it is aimed.",
author: "Josef Stalin",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"The vanity of teaching doth oft tempt a man to forget that he is a blockhead..",
author: "George Savile",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is a state-controlled manufactory of echoes.",
author: "Norman Douglas",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"The best education consists in immunizing people against systematic attempts at education.",
author: "Paul Karl Feyerabend",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"A man who has never gone to school may steal from a freight car; but if he has a university education, he may steal the whole railroad.",
author: "Theo Roosevelt",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"But, good gracious, you've got to educate him first. You can't expect a boy to be vicious till he's been to a good school.",
author: "H.H. Munro",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is hanging around until you've caught on.",
author: "Robert Frost",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is the period during which you are being instructed by somebody you do not know, about something you do not want to know.",
author: "Gilbert K Chesterton",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I wonder whether if I had an education I should have been more or less a fool than I am.",
author: "Alice James",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I pay the schoolmaster, but it is the schoolboys who educate my son.",
author: "Ralph Waldo Emerson",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Thank goodness I was never sent to school; it would have rubbed off some of the originality..",
author: "Helen Beatrix Potter",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"My grandmother wanted me to have an education, so she kept me out of school.",
author: "Margaret Mead",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Anyone who has passed through the regular gradations of a classical education, and is not made a fool by it, may consider himself as having had a very narrow escape.",
author: "William Hazlitt",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"Education is a method whereby one acquires a higher grade of prejudices.",
author: "Laurence J Peter",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},{
quote:"I am beginning to suspect all elaborate and special systems of education. They seem to me to be built up on the supposition that every child is a kind of idiot who must be taught to think.",
author: "Anne Sullivan",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{quote:"Drop out of school before your mind rots from exposure to our mediocre educational system. Forget about the Senior Prom and go to the library and educate yourself if you've got any guts. Some of you like Pep rallies and plastic robots who tell you what to read.”",
author:"Frank Zappa",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}
];
const btn =document.getElementById('generate-btn');
btn.addEventListener('click',function(){
let random=Math.floor(Math.random()*quotes.length);
console.log(random);
document.getElementById('quote').textContent=quotes[random].quote;
document.querySelector('.author').textContent=quotes[random].author;
document.querySelector('.quote-image-13').textContent=quotes[random].imageurl;
});
})();
</script>
</body>
</html>
解决方案
您的选择器针对的是跨度，而不是图像。修复该使用
document.querySelector('.quote-image-13 > img').src=quotes[random].imageurl;
另请注意，您的班级名称似乎有错字。有时您将其称为.quote-image-13，而另一种称为.quote-image-l3
//immediate invoked function expression
//immediate invoked function expression
(function() {
const quotes = [
{
quote: "It is, in fact, nothing short of a miracle that the modern methods of education have not yet entirely strangled the holy curiosity of inquiry; for this delicate plant, aside from stimulation, stands mainly in need of freedom; without this it goes to wrack and ruin without fail. It is a very grave mistake to think that the enjoyment of seeing and searching can be promoted by means of coercion and a sense of duty.",
author: "Albert Einstein",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Knowledge that is acquired under compulsion obtains no hold on the mind.",
author: "Plato",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote: "Reward and punishment is the lowest form of education.",
author: "Chuang Tzu",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote: "Education consists mainly in what we have unlearned.",
author: "Mark Twain",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "I have nevere let my schooling interfere with my education",
author: "Mark Twain",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote: "The whole theory of modern education is radically unsound. Fortunately in England, at any rate, education produces no effect whatsoever. If it did, it would prove a serious danger to the upper classes, and probably lead to acts of violence.",
author: "Oscar Wilde",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is an admirable thing, but it is well to remember from time to time that nothing that is worth knowing can be taught.",
author: "Oscar Wilde",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "I loathed every day and regret every moment I spent in a school..",
author: "Wood Allen",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "I hated school. Even to this day, when I see a school bus it's just depressing to me. The poor little kids.",
author: "Dolly Parton",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "There is nothing on earth intended for innocent people so horrible as a school.",
author: "George Bernard Shaw",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "What we call education and culture is for the most part nothing but the substitution of reading for experience, of literature for life, of the obsolete fictitious for the contemporary real.",
author: "George Bernard Shaw",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "What does education often do? It makes a straight-cut ditch of a free, meandering brook.",
author: "Henry David Thoreau",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "How could youths better learn to live than by at once trying the experiment of living?",
author: "Henry David Thoreau",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Men are born ignorant, not stupid; they are made stupid by education.",
author: "Bertrand Russell",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is one of the chief obstacles to intelligence and freedom of thought.",
author: "Bertrand Russell",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "He was so learned that he could name a horse in nine languages; so ignorant that he bought a cow to ride on.",
author: "Benjamin Franklin",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "The average schoolmaster is and always must be essentially an ass, for how can one imagine an intelligent man engaging in so puerile an avocation.",
author: "H.L. Mencken",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is a weapon, whose effect depends on who holds it in his hands and at whom it is aimed.",
author: "Josef Stalin",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "The vanity of teaching doth oft tempt a man to forget that he is a blockhead..",
author: "George Savile",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is a state-controlled manufactory of echoes.",
author: "Norman Douglas",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "The best education consists in immunizing people against systematic attempts at education.",
author: "Paul Karl Feyerabend",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "A man who has never gone to school may steal from a freight car; but if he has a university education, he may steal the whole railroad.",
author: "Theo Roosevelt",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "But, good gracious, you've got to educate him first. You can't expect a boy to be vicious till he's been to a good school.",
author: "H.H. Munro",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is hanging around until you've caught on.",
author: "Robert Frost",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is the period during which you are being instructed by somebody you do not know, about something you do not want to know.",
author: "Gilbert K Chesterton",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "I wonder whether if I had an education I should have been more or less a fool than I am.",
author: "Alice James",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "I pay the schoolmaster, but it is the schoolboys who educate my son.",
author: "Ralph Waldo Emerson",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Thank goodness I was never sent to school; it would have rubbed off some of the originality..",
author: "Helen Beatrix Potter",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "My grandmother wanted me to have an education, so she kept me out of school.",
author: "Margaret Mead",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Anyone who has passed through the regular gradations of a classical education, and is not made a fool by it, may consider himself as having had a very narrow escape.",
author: "William Hazlitt",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "Education is a method whereby one acquires a higher grade of prejudices.",
author: "Laurence J Peter",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}, {
quote: "I am beginning to suspect all elaborate and special systems of education. They seem to me to be built up on the supposition that every child is a kind of idiot who must be taught to think.",
author: "Anne Sullivan",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
},
{
quote: "Drop out of school before your mind rots from exposure to our mediocre educational system. Forget about the Senior Prom and go to the library and educate yourself if you've got any guts. Some of you like Pep rallies and plastic robots who tell you what to read.”",
author: "Frank Zappa",
imageurl: "https://news.rutgers.edu/sites/medrel/files/inline-img/Einstein%20C%20from%20shutterstock.jpeg"
}
];
const btn = document.getElementById('generate-btn');
btn.addEventListener('click', function() {
let random = Math.floor(Math.random() * quotes.length);
document.getElementById('quote').textContent = quotes[random].quote;
document.querySelector('.author').textContent = quotes[random].author;
document.querySelector('.quote-image-13 > img').src = quotes[random].imageurl;
});
})();.max-height {
min-height: 100vh;
}
body {
background: #b09e99;
}
.quote-container {
background: rgba(255, 255, 255, 0.5);
}
#generate-btn {
color: white !important;
background: #64b6ac !important;
border-color: #64b6ac !important;
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
#generate-btn:hover {
background: #b09e99 !important;
border-color: #b09e99 !important;
color: #333333 !important;
}
.author {
color: #64b6ac;
}<div class="container">
<div class="row max-height align-items-center">
<div class="col-11 mx-auto col-md-6 quote-container p-5">
<button class="btn-outline-primary text-capitalize my-4 d-block mx-auto" id="generate-btn">generate quote</button>
<h3 class="text-muted">
<span class="quote-icon mr-3">
<i class="fas fa-quote-left fa-3x"></i>
<span id="quote">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos quasi ad aliquid? Iusto cumque maiores atque, enim eos autem quasi.</span>
</span>
</h3>
<h5 class="text-right text-capitalize author">
<span class="quote-author ml-3">
author
</span>
</h5>
<span class="quote-image-13">
<img src="" class="img-fluid" alt="">
where image will go
</span>
</div>
</div>
</div>推荐阅读
- payment-gateway - 在万事达卡支付网关中验证支付
- python-3.x - Python3 - 网页抓取 zomato - 多个页面
- python - 没有numpy的python中的梯形规则
- python-3.x - 无法在 Python 中分组 by() 和 sum()
- c# - IIS Web 请求无限期挂起 - OWIN 模块
- go - 无法在 vscode 中运行第一个 golang 项目
- solr - Solr - 添加 JSON 文档
- bash - 使用 bash 将特殊字符 (√) 转换为普通字符串
- python - 使用 re.match() 修复字符串大小写
- mysql - 无法返回符合条件的记录